javascript - 我尝试使用 JavaScript 删除元素出了什么问题？

Question

我有一个使用以下系统的表单:字段及其标签为float: left，并且解释如何填写字段的扩展注释出现在最右侧，位置为左边距较宽。
根据 Eric Meyer 书中的建议，我使用 hr 来对齐两者:我放置了一个 hr 样式:

.lineup { clear:both; visibility: hidden}

然后我使用 Javascript 在需要时显示评论。
这非常有效，除了(对于 Safari 中的一些奇怪问题以及)当注释非常长时，当它“推下”其他表单内容出现时。
所以，我说，我可以编写一个 Javascript 函数来在页面构建上运行，删除 hr(记住它们的 offsetTop)并将所有描述移动到 hr 所在位置附近的某个位置。
但我无法让它删除 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 仍然存在，并且 firebug 也确认了这一点。

帮忙？

附注
如果有一种简单的方法可以使用 JQuery 执行此操作，我很乐意这样做，但我真的很想知道 $@#&*% 在这里发生了什么。

谢谢!

Answer 1

getElementsByTagName 返回的节点列表是事件的，这意味着当您从 DOM 中删除其中一个元素时，右侧的内容会向左移动，因此您只需删除每隔一个项目.

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

NodeList and NamedNodeMap objects in the DOM are live; that is, changes to the underlying document structure are reflected in all relevant NodeList and NamedNodeMap objects.

您可以通过将 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;) {
  ...
}

这样，当您删除某个项目时，右侧就不会出现任何向左移动的内容，从而扰乱您的索引。