父元素没有删除与jquery点击事件

我想删除一个按钮，这是一个列表元素，一旦单击按钮的父母。父元素没有删除与jquery点击事件

编程世界的新手，所以它可能很简单，但我无法找到一个解决方案，基于我发现与其他人张贴在堆栈溢出和互联网上。请有人指出我做错了什么？我正在使用Javascript和Jquery的组合。我试图利用我已经知道的技能以及为了完成工作而进行的一些研究。我正在学习使用纯Javascript进行类似移除事件所需的技巧和技巧，但现在我只是使用Jquery来处理这些事情。

$(document).ready(function() { 
 

 
    document.getElementById("add").addEventListener("click", function() { 
 

 
    var taskinput = document.getElementById("task").value; 
 

 
    if (taskinput) { 
 

 
     var tasktext = document.createTextNode(taskinput); 
 
     var list = document.createElement("li"); 
 
     list.appendChild(tasktext); 
 
     var button = document.createElement("button"); 
 
     button.setAttribute("class", "completed"); 
 
     button.innerHTML = "X"; 
 
     list.appendChild(button); 
 
     document.getElementById("task-to-do").appendChild(list); 
 
     document.getElementById("task").value = " "; 
 
    } else { 
 
     alert("Please enter a task"); 
 
    } 
 

 
    }); 
 

 
    $("button .completed").click(function() { 
 
    $(this).closest("li").remove();; 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
    <header> 
 
    <h1>ENTER A TASK BELOW</h1> 
 
    <input type="text" id="task"><img id="add" src="add.png"> 
 
    </header> 
 

 
    <div id="incomplete-tasks"> 
 
    <h4>TO-DO LIST</h4> 
 
    <ul id="task-to-do"> 
 

 
    </ul> 
 

 
    </div>

来源

2017-09-28 jimmy118

嗨，如前所述，我是编程新手，之前做过我的研究，但并不完全确定术语“事件绑定”。我正在学习，因为我正在走。由于提出了这个问题，我现在已经了解了绑定事件的情况，因此我在下一次提问之前能够更加了解这类问题。 – jimmy118

嗨，死了，我不确定你的意思到底是什么？我是新的stackoverflow。我点击了勾号并投了你的答案。没有显示？他们唯一的答案是我可以打勾吗？ – jimmy118

是的，你只能标记一个答案。顺便说一句，如果它们有用，你可以对所有答案进行投票表决。感谢 –

，因为你是创建li ABD button内ul动态，以便通过与它的参考绑定事件的静态父（ul）。

$('#task-to-do').on('click', "button.completed", function(){ 
    $(this).closest("li").remove(); 
});

工作小提琴： - https://jsfiddle.net/xn86cunw/

参考： - jQuery event-delegation

注： - 遍历变少，而不是通过$(document).on(...)做。要做到这一点

来源

2017-09-28 11:52:20

为什么不投票重复，当你知道这已被问了数百次 – mplungjan

因为已经给出了答案，所以标记重复是不必要的。因为我有一个更好的主意，所以我分享了。我还需要三个其他人帮助标记问题重复，但同时很多答案已发布 –

的项目是动态添加，你为此需要将事件绑定一个静态项目（例如，文档）

因此改变功能

$(document).on('click', "button.completed", function(){ 
    $(this).closest("li").remove(); 
});

（还请注意，button和.completed之间的距离被删除）。

来源

2017-09-28 11:50:11 LinkinTED

[很好的解决方案]（https://jsfiddle.net/whjxof56/1/）LinkinTED。 – urbz

@urbz，从'document'删除引号https://jsfiddle.net/whjxof56/2/ – LinkinTED

为什么不投票重复，当你知道这已被问了数百次 – mplungjan

一种方法是将事件监听器添加到每个按钮，当您创建它，就像这样：

button.addEventListener("click", function() { 
    button.parentNode.parentNode.removeChild(button.parentNode); 
});

这里有一个工作示例：

$(document).ready(function() { 
 

 
    document.getElementById("add").addEventListener("click", function() { 
 

 
    var taskinput = document.getElementById("task").value; 
 

 
    if (taskinput) { 
 

 
     var tasktext = document.createTextNode(taskinput); 
 
     var list = document.createElement("li"); 
 
     list.appendChild(tasktext); 
 
     var button = document.createElement("button"); 
 
     button.setAttribute("class", "completed"); 
 
     button.innerHTML = "X"; 
 
     button.addEventListener("click", function() { 
 
     button.parentNode.parentNode.removeChild(button.parentNode); 
 
     }); 
 
     list.appendChild(button); 
 
     document.getElementById("task-to-do").appendChild(list); 
 
     document.getElementById("task").value = " "; 
 
    } else { 
 
     alert("Please enter a task"); 
 
    } 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
    <header> 
 
    <h1>ENTER A TASK BELOW</h1> 
 
    <input type="text" id="task"><img id="add" src="add.png" alt="img"> 
 

 
    </header> 
 

 
    <div id="incomplete-tasks"> 
 
    <h4>TO-DO LIST</h4> 
 
    <ul id="task-to-do"> 
 

 
    </ul> 
 

 
    </div>

来源

2017-09-28 11:54:20 freginold

父元素没有删除与jquery点击事件

回答

相关问题