删除子元素的 onclick 处理程序
onclick handler that removes child element
我正在寻找一种方法,我可以将一个按钮从另一个 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的解决方案就更好了
要删除元素,请使用 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>
使用 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>
我正在寻找一种方法,我可以将一个按钮从另一个 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的解决方案就更好了
要删除元素,请使用 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>
使用 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>