删除子元素的 onclick 处理程序

Question

我正在寻找一种方法，我可以将一个按钮从另一个 div 中动态地插入到 div 中，并且当单击该按钮时，内部 DIV 消失了，我只剩下外面的 div 而里面没有其他东西。

这是我目前拥有的：

<div ID="Parent">
<div ID="Child">
</div>
</div>

clickableobject=document.createElement('Button');
achild=document.getElementById("Child");
achild.appendChild(clickableobject);
clickableobject.onclick=new Function('document.getElementById("Parent").removeChild('+achild+')');

但是当我运行它时，onclick 处理程序确实触发了，但它抱怨 removeChild 参数并在控制台错误日志中显示一个数字作为参数传入，而该数字不是-1。我该怎么做才能明确告诉 javascript 在所有上下文中将 'achild' 视为对象？

我正在寻找也适用于旧版网络浏览器的解决方案。如果有IE7的解决方案就更好了

Answer 1

要删除元素，请使用 elementNodeReference.remove(); 方法从它所属的树中删除对象。

试试这个：

var clickableobject = document.createElement('Button');
clickableobject.innerText = 'Click me';
var achild = document.getElementById("Child");
achild.appendChild(clickableobject);
clickableobject.onclick = function() {
  achild.remove();
}

<div ID="Parent">
  <div ID="Child">
  </div>
</div>

Fiddle here

使用 Function constructor 而不使用 remove()，试试这个：

var clickableobject = document.createElement('Button');
clickableobject.innerText = 'Click me';
var achild = document.getElementById("Child");
achild.appendChild(clickableobject);
clickableobject.onclick = new Function('achild.parentNode.removeChild(achild);')

<div ID="Parent">
  <div ID="Child">
  </div>
</div>

Fiddle here

删除子元素的 onclick 处理程序

onclick handler that removes child element

javascript

html

onclick

internet-explorer-7

removechild