Question

我试图在单击按钮后删除按钮的父级，这是一个列表元素。

编程世界的新手所以它可能是简单的东西，但我找不到基于我发现的其他人在堆栈溢出和互联网上发布的解决方案。请有人指出我做错了吗？

我正在使用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>

Answer 1

项目是动态添加的，因此你需要在静态项目上绑定事件（例如，文档）

所以将功能更改为

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .7s ease;
  /* Black background with 80% color opacity */
  background-color: rgba(0, 0, 0, 0.8); 
}

.col:hover .overlay {
  /* opacity maximum value is 1 */
  opacity: 1;
}

（另请注意，$(document).on('click', "button.completed", function(){ $(this).closest("li").remove(); });和button之间的空格已删除。）

Answer 2

执行此操作的一种方法是在创建时为每个按钮添加一个事件侦听器，如下所示：

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>

Answer 3

您在li内创建了button abd ul，因此通过引用将事件与其静态父（ul）绑定。

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

工作小提琴： - official mirror

参考： - https://jsfiddle.net/xn86cunw/

注意： - 遍历变得更少而不是通过$(document).on(...)。

未使用jquery click事件删除父元素

3 个答案: