鍍金池/ 問答/HTML/ addEventListener 的 點擊刪除節(jié)點事件報錯？

addEventListener 的 點擊刪除節(jié)點事件報錯？

使用 addEventListener 添加點擊事件，然后點擊刪除按鈕的父節(jié)點會報錯（The node to be removed is not a child of this node.），而使用onclick事件卻不會，請問這是什么原因呢？

<body>
<div class="main">
    <div class="text-box">
        <p>有什么新鮮事要告訴大家？</p>
        <textarea id="text-input" ></textarea>
        <input id="send" type="button" value="發(fā)布" />
    </div>
    <div id="show"></div>
</div>

<script type="text/javascript">
var user_text = document.getElementById("text-input");
var send = document.getElementById("send");
var show = document.getElementById("show");
send.addEventListener("click",function(){
    if(user_text.value == ""){
        alert("請輸入要發(fā)布的內(nèi)容！");
        return;
    }
    var post_text = document.createTextNode(user_text.value);
    var post = document.createElement("p");
    var del = document.createElement("span");
    var del_text = document.createTextNode("刪除");

    del.appendChild(del_text);
    post.appendChild(post_text);
    post.appendChild(del);
    show.insertBefore(post,show.firstChild);
    user_text.value = "";

    var del_btn = show.getElementsByTagName("span");
    for(var i = 0; i < del_btn.length; i++){
        del_btn[i].addEventListener("click",function(){
            show.removeChild(this.parentNode);
        });
    }
});

</script>
</body>

我知道報的錯是什么意思，這不是重點，我是想知道為什么addEventListener添加的事件會報錯，而改成onclick事件就不會。

回答
編輯回答
兮顏

The node to be removed is not a child of this node
參考
原因呢是因為onclick會覆蓋之前的onclick，而addEventListener不會。
你每次發(fā)布會將已存在的按鈕的事件重復綁定一次。導致刪了之后會再刪，而此時節(jié)點已經(jīng)不存在了。
for 循環(huán)刪了，直接綁定給del

del.addEventListener("click",function(){
  console.log(this.parentNode)
  debugger
    show.removeChild(this.parentNode);
});
2017年4月21日 01:32