Question

我遇到了JavaScript removeChild函数的问题，不幸的是，这是我第一次在论坛上找不到什么问题。这是一个场景：
用for循环创建div元素并在其中加入单词test - 当单击其中一个div时，将附加存储在Foo对象中的div元素附加到其上 - 如果单击Foo对象的div，则将其从DOM中删除

这是我使用的代码。在IE和FF中尝试过。没有显示错误，removeChild SEEMS工作正常，但永远不会删除foo div。希望有人可以帮助我找出为什么不起作用。

function Foo() {
 this.container = document.createElement("div");
 this.container.appendChild(document.createTextNode("foo"));

 this.container.onclick = function() {  
  // in the function'this' refers to the clicked element, i.e. container
  console.log(this.parentNode); // the clicked div has a parent
  console.log(this.parentNode.removeChild(this)); // the div is removed from DOM
  console.log(this.parentNode); // null, the clicked div has no more parent but...
  // foo is STILL DISPLAYED ?!
 }
}

var foo = new Foo();

function Test() {
 // create 3 div with the word test inside
 for(i=0; i<3; i++) {
  var t = document.body.appendChild(document.createElement("div"));
  t.appendChild(document.createTextNode("test"));
  // when test div is clicked, append to it the container (a div element) from object foo
  // due to the for loop we need a closure for t
  t.onclick = function(t){ return function() {
   t.appendChild(foo.container); // here it works great and t is moved to the clicked test div
  }; }(t);
 }
}

new Test();

非常感谢您花时间调查我的问题

Answer 1

当您点击其中包含foo字样的容器时，您还会点击其中包含t字样的test div。其中有一个点击处理程序会将您的foo.container追加回您foo.container.onclick处理程序刚删除它的元素。

快速修复：在容器处理了click事件后，它会停止将事件传播到DOM树中较高的元素：

 …
 this.container.onclick = function(e) {  
  // in the function'this' refers to the clicked element, i.e. container
  console.log(this.parentNode); // the clicked div has a parent
  console.log(this.parentNode.removeChild(this)); // the div is removed from DOM
  console.log(this.parentNode); // null, the clicked div has no more parent

  e.stopPropagation();
  // foo is NO MORE DISPLAYED
 }
 …

高级修复：请勿附加将foo添加到t元素的处理程序，但仅限于test字。但是，你需要一个额外的元素：

  …
  var t = document.body.appendChild(document.createElement("div"));
  var s = t.appendChild(document.createElement("span"));
  s.appendChild(document.createTextNode("test"));
  // when test div is clicked, append to it the container (a div element) from object foo
  // due to the for loop we need a closure for t
  s.onclick = function(s){ return function() {
   s.appendChild(foo.container); // here it works great and t is moved to the clicked test div
  }; }(s);
  …

此变体的一个变体是不将foo.container附加到t本身，而是作为兄弟姐妹附加。

Answer 2

您将onclick事件添加到容器中，因此正确的代码为：

function Foo() {
this.container = document.createElement("div");
this.container.appendChild(document.createTextNode("foofoofoooooo"));

this.container.onclick = function() {
this.removeChild(this.firstChild);
 }
 }

 var foo = new Foo();

 function Test() {
 // create 3 div with the word test inside
 for(i=0; i<3; i++) {
  var t = document.body.appendChild(document.createElement("div"));
            t.appendChild(document.createTextNode("test"));
  // when test div is clicked, append to it the container (a div element) from object foo
  // due to the for loop we need a closure for t
      t.onclick = function(t){ return function()      {
   t.appendChild(foo.container); // here     it works great and t is moved to the     clicked test div
  }; }(t);
 }
}

 new Test();

我测试过它有效！

JavaScript removeChild不会删除div元素

2 个答案: