为什么Javascript中的removeChild总是删除最后一个孩子而不是从中获得id的孩子？

Question

我有四个带有事件侦听器 onclick 的 div， 调用一个 js 函数，它只执行以下操作：

this.parentNode.removeChild(this);

我希望它删除我单击的 div，但它没有。 相反，它会删除最后一个子项并将后面给出的 id 更改为 已删除子项的 id（第一次单击，最后一个子项），然后进一步单击 其他 div 将给定的 id 倒数到 1。去除 数组中从最后一个到第一个的子节点。

我尝试了很多变体，例如

document.getElementById('parentElementName').removeChild(this.gettAttribute('id'));

or

parent =document.getElementById('parentElementName');

to_be_removed = document.getElementById(this.gettAttribute('id');

parent.removeChild(to_be_removed);

或 childNodes // id = 1,2,3,4

to_be_removed =document.getElementById('box_content').childNodes[this.getAttribute('id')];

parent =document.getElementById('box_content');
    parent.removeChild(to_be_removed);

奇怪我可以成功更改可见性或背景颜色：

document.getElementById('box_content').childNodes[this.getAttribute('id')].style.visibility='hidden';

或

Answer 1

设法重制您想要的内容，请访问 http://jsfiddle.net/6YHcv/ 来查看。这是你所需要的吗？

如果您在 IE 上使用 attachEvent，则事件处理程序中的 this 可能会引用全局对象，而不是您的元素。否则我无法告诉你为什么你的代码不起作用。

Answer 2

我在您的代码中看到一些拼写错误。我认为你的第二个例子应该工作得很好（见评论）：

// make sure this is the parent element's ID and not the name, as this suggests.
    parent = document.getElementById('parentElementName'); 

//note the double 't' in getAttribute; also, you are missing an end bracket
    to_be_removed = document.getElementById(this.gettAttribute('id'); 

//looks good
    parent.removeChild(to_be_removed);

不过也看看这个例子： jsfiddle

它应该像在 onclick 处理程序之后调用函数 this.parentNode.removeChild(this) 一样简单。