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

Question

我有一個使用以下系統的表單：字段及其標簽是float: left ，解釋如何填充字段的擴展注釋顯示在右側，位置很靠左。
按照Eric Meyer的書中的建議，我使用hr來使兩者對齊：我將hr樣式設置為：

.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仍然存在。

救命？

聚苯乙烯
如果可以使用JQuery輕松實現此目的，那么我很滿意，但是我真的很想知道$ @＃＆*％在這里發生了什么。

謝謝！

Answer 1

由getElementsByTagName返回的節點列表是活動的，這意味着當您從DOM中刪除其元素之一時，向右移動的對象將向左移動，因此，您僅刪除了第二個項目。

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

DOM中的NodeList和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;) {
  ...
}

這樣，當您刪除某項時，右側沒有任何內容會向左移動，從而使您的索引混亂。