JavaScript removeChild不删除div元素

我面临着JavaScript removeChild函数的问题，不幸的是，这是我第一次在论坛上找不到问题所在。以下是场景：
-使用for循环创建div元素，并将单词test放入其中
-单击其中一个div时，将存储在Foo对象中的div元素追加到该div中
-如果单击了来自Foo的div对象，请将其从DOM中删除

这是我使用的代码。试用IE和FF。没有显示错误，removeChild似乎工作正常，但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();

函数Foo（）{
this.container=document.createElement（“div”）；
this.container.appendChild（document.createTextNode（“foo”）；
this.container.onclick=function（）{
//在函数中，“this”指的是单击的元素，即容器
console.log（this.parentNode）；//单击的div有一个父节点
console.log（this.parentNode.removeChild（this））；//从DOM中删除div
console.log（this.parentNode）；//null，单击的div不再有父节点，而是。。。
//富还在展示？！
}
}
var foo=new foo（）；
功能测试（）{
//创建3个div，其中包含单词test
对于（i=0；i当您单击其中包含单词
foo
的容器时，您还可以单击其中包含单词
test
的
t
div。它有一个click处理程序，将您的
foo.container
追加回
foo.container.onclick
处理程序刚刚从中删除它的元素

快速修复：容器处理
单击
事件后，它停止将事件传播到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
元素，而只附加到
测试
单词。不过，您需要一个额外的元素：

  …
  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
本身，而是作为兄弟姐妹添加到容器中。
您将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();

函数Foo（）{
this.container=document.createElement（“div”）；
this.container.appendChild（document.createTextNode（“foooooo”）；
this.container.onclick=function（）{
这个.removeChild（这个.firstChild）；
}
}
var foo=new foo（）；
功能测试（）{
//创建3个div，其中包含单词test
对于（i=0；我能不能请你用它创建一个JSFIDLE？你确定
单击
事件正在
div
上发生吗？欢迎这样做。如果不包括
removeChild
语句之前发生的所有内容，你的问题就会得到改进。请简化。@isherwood我发现它在理解内容方面非常有用问题的答案和试图实现的目标…很公平。我们中的一些人希望看到HTML，但是。哦，我知道这很棘手。很好的捕获谢谢你。现在一切都很好。Bergi更精确，事实上你每次都附加和删除节点