javascript 在javascript中从body中添加和删除div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27073661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add and remove div from body in javascript
提问by CKY
I'm kinda new to javascript, and probably there are other people who already asked similar question, but I hope you can help me anyway. I'm trying a simple basic operation of add/remove of a div. The add works fine, the remove is never called.
我对 javascript 有点陌生，可能还有其他人已经问过类似的问题，但无论如何我希望你能帮助我。我正在尝试添加/删除 div 的简单基本操作。添加工作正常，从不调用删除。
function $(el) {
return document.getElementById(el);
}
function remove() {
console.log("remove called");
var child = $('second');
}
function addContainer() {
console.log("addContainer called");
var aContainer = document.createElement('div');
aContainer.setAttribute('id', 'second');
aContainer.innerHTML = "<a href=\"#\" onclick=\"remove()\">second</a>";
document.body.appendChild(aContainer);
}
In the addContainer I try to add the onclick function callback, but apparently it doesn't work.
在 addContainer 中，我尝试添加 onclick 函数回调，但显然它不起作用。
Here the jsfiddle of reference http://jsfiddle.net/m8kyav2b/
这里参考http://jsfiddle.net/m8kyav2b/的jsfiddle
DO you know why 1- the remove function is never called? 2- once I click on the remove link, the innerHTML is removed, but not the div "second"?
你知道为什么 1- 从不调用 remove 函数吗？2- 单击删除链接后，将删除innerHTML，但不会删除div“第二个”？
Thanks a lot in advance
非常感谢提前
回答by baao
Try it like this, it will work:
像这样尝试，它会起作用：
function $(el) {
return document.getElementById(el);
}
function removeit() {
alert("remove called");
var child = $('second');
child.remove();
}
function addContainer() {
console.log("addContainer called");
var aContainer = document.createElement('div');
aContainer.setAttribute('id', 'second');
aContainer.innerHTML = "<a href=\"#\" onclick=\"removeit()\">second</a>";
document.body.appendChild(aContainer);
}
SIDENOTE:
边注：
Calling remove() as your function won't work as it is a native javascript function. You didn't actually remove the div in your function, too!
调用 remove() 作为您的函数将不起作用，因为它是本机 javascript 函数。您实际上也没有删除函数中的 div！
回答by u283863
removeis never called because removein your <a>tag is referring to the native function remove(to be specific, HTMLAnchorElement.prototype.remove/ChildNode.remove) instead of yours. This is why only the text is removed, since ChildNode.removetargets its child.
remove永远不会被调用，因为remove在您的<a>标签中是指本机函数remove（具体来说，HTMLAnchorElement.prototype.remove/ChildNode.remove）而不是您的。这就是为什么只删除文本的原因，因为ChildNode.remove目标是它的孩子。
To reference your function, do
要引用您的函数，请执行
<a href="#" onclick="window.remove();"></a>
Or even better:
或者甚至更好：
var aContainer = document.createElement('div'),
anchor = document.createElement("a");
aContainer.setAttribute('id', 'second');
a.innerText = "second";
a.addEventListener("click", remove);
aContainer.appendChild(a);
document.body.appendChild(aContainer);
回答by Kris
Here is a helpful link: Remove element by id. The below code is tested and works (it will upon mouse over delete the HTML tag, so basically just change the syntax around a little to have it delete what ever tag you want.
这是一个有用的链接：Remove element by id。下面的代码已经过测试并有效（它会在鼠标悬停时删除 HTML 标签，所以基本上只需稍微更改语法即可让它删除您想要的任何标签。
<p id="el" onmouseover="remove()">test</p> <!--we are deleting with JavaScript this HTML <p> tag. -->
function remove() {
var element = document.getElementById("el"); /* finding and assigning element to variable element */
document
element.parentNode.removeChild(el); // then deleting the parent and child (please refer to link)
}
as far as the rest of your question. Look here: add onclick event to newly added element in javascript.
至于你的问题的其余部分。看这里：将 onclick 事件添加到 javascript 中新添加的元素。
