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();哪个方法从其所属的树中删除对象。

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Fiddle here

在不使用Function constructor的情况下使用remove()，请尝试以下操作：

＆＃13;

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);')

＆＃13;

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

＆＃13;

Fiddle here

移除子元素

1 个答案: