Question

我是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);
}

在addContainer中我尝试添加onclick函数回调，但显然它不起作用。

这里是jsfiddle的参考 http://jsfiddle.net/m8kyav2b/

你知道为什么吗？ 1-从不调用remove函数？ 2-一旦我点击删除链接，innerHTML将被删除，但不会删除div＆＃34; second＆＃34;？

提前多多感谢

Answer 1

尝试这样，它会起作用：

DEMO

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

旁注：

调用remove（），因为它是一个原生的javascript函数，因此无法正常工作。你也没有真正删除函数中的div！

Answer 2

remove永远不会被调用，因为remove标记中的<a>指的是原生函数remove（具体而言，HTMLAnchorElement.prototype.remove/ChildNode.remove）而非您的。这就是为什么只删除文本的原因，因为ChildNode.remove定位了它的孩子。

要参考您的功能，请执行

<a href="#" onclick="window.remove();"></a>

甚至更好：

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

Answer 3

这是一个有用的链接：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)
}

至于你的其他问题。看这里：add onclick event to newly added element in javascript。

在javascript中添加和删除body中的div

3 个答案: