我嘗試用JavaScript刪除元素有什麼問題？

我有一個表格，我使用以下系統：字段和它們的標籤是float: left，並且解釋如何填寫字段的擴展註釋出現在右側，左側邊距較寬。
繼在埃裏克邁耶書的建議，我用一個小時來對齊二：我把與風格的hr：我嘗試用JavaScript刪除元素有什麼問題？

.lineup { clear:both; visibility: hidden}

然後我用JavaScript來讓註釋顯示時，我想它。
這很好，除了（對於Safari中的一些奇怪的問題），當評論真的很長時，當它「推倒」出現的其他表單內容時。因此，我說，我可以編寫一個Javascript函數在頁面構建上運行，刪除hr（記住它們的offsetTop），並將所有描述移動到hr附近的某處。
但我無法去除它的人力資源。

最後的代碼：

var hrListY = new Array();    // Y-coordinates of HR "lineup" elements 

// Moves all descriptions so their middle is where the top used to be, and 
// removes the <hr>s previously used to position them. 

function relayoutDescriptions() { 
     var hrs = document.getElementsByTagName("hr"); 
     alert('hrs.length = ' + hrs.length); 
     var i; 
     for (i = 0; i < hrs.length; i++) { 
       var hr = hrs[i]; 
       if (hr.className == 'lineup') { 
         hrListY.push(hr.offsetTop); 
         alert('Got an HR element: Y = ' + hr.offsetTop + ' parentNode class = "' + hr.parentNode.className + '"'); 
         hr.parentNode.removeChild(hr); 
         } 
       } 

// Now we have a list of Y-coordinates of HR elements, hrListY. We use it 
// to adjust the offsetTop's of the -desc divs. For each one, we adjust the 
// offsetTop so the center of the div is at the height where the HR was. 

     }

這就是我有這麼遠。它給了我offsetTop和一個合理的父節點類的合理的遞增數字，但是由此產生的佈局清楚地顯示，並且螢火蟲證實hr的數據仍然存在。

幫助？

P.S.
如果有一個簡單的方法可以用JQuery來做到這一點，我很喜歡這一點，但我真的很想知道$ @＃& *％在這裏發生了什麼。

謝謝！

來源

2011-03-31 Jeffiekins

getElementsByTagName返回的節點列表是活動的，這意味着當您從DOM中移除其中的某個元素時，右側的內容向左移動，因此您只需移除每個第二項。

從http://www.w3.org/TR/DOM-Level-2-Core/core.html在DOM

節點列表和的NamedNodeMap對象是活的;也就是說，對底層文檔結構的更改會反映在所有相關的NodeList和NamedNodeMap對象中。

你可以看到，通過在你的循環中移動alert('hrs.length = ' + hrs.length);是如此。它會每次通過不同的號碼。

爲了解決這個問題，你可以複製列表

var myNodeList = document.getElementsByTagName('HR'); 
myNodeList = Array.prototype.slice.call(myNodeList);

，或者你可以遍歷從右到左

var myNodeList = document.getElementsByTagName('HR'); 
for (var i = myNodeList.length; --i >= 0;) { 
    ... 
}

這樣，當你刪除一個項目，沒有什麼是轉移權把你的索引搞亂了。

來源

2011-03-31 23:59:59

好的建議！另一個選擇是隱藏'

'而不是將其刪除：'hr.style.display =「none」;' – 2011-04-01 00:25:06

也有輕微更正：它適用於（i = ...長度 - 1; ... 但它作品。向後迭代......誰會做出讓步？雖然是完美的。感謝您的教育！ – Jeffiekins 2011-04-01 13:47:44

我嘗試用JavaScript刪除元素有什麼問題？

回答

相關問題