Question

我正在创建一个待办事项列表应用程序，并且在应用程序中有一个div包装一个输入框（用于待办事项，因此用户可以编辑待办事项）和一个图标来自字体-awesome。当用户点击图标时，我希望删除整个div （包含待办事项和删除图标）。但是当试图这样做时，它没有用。有人能帮助我吗？

这是JS代码

$(document).ready(() => {
    $(".input input").on("keypress", check_todo);
    $(".fa-trash").on("click", ".todo_container", delete_todo);
})

// delete todo
let delete_todo = (e) => {
    e.target.remove();
}

// add todo
let add_todo = () => {
    let todo = $(".input input").val();

    $(".output").append(`
        <input type="text" placeholder="Edit To-do" value="${todo}"><i class="fa fa-trash fa-lg" aria-hidden="true"></i>
        `);
    $(".input input").val("");
}

// check todo
let check_todo = (e) => {
    if (e.keyCode == 13) {
        if ($(".input input").val() == "") {
            no_todo();
        } else {
            add_todo();
        }
    }
}

// no todo
let no_todo = () => {
    alert("Please add a new todo");
}

See the html and a demo

Answer 1

您应该绑定到.out-put容器。

$(".output").on("click",".fa-trash" , delete_todo);

http://codepen.io/Vrety/pen/WoWmaE

Answer 2

http://codepen.io/anon/pen/eBoXZe

在您的事件监听器中，您需要交换".todo_container"和".fa-trash"。

 $(".todo_container").on("click",".fa-trash" , delete_todo);

此声明表示，当点击事件发生并且冒泡到.todo_container时，检查点击的元素是否为.fa-trash，如果是，则调用该函数。

然后更改删除功能

let delete_todo = (e) => {
    $(e.currentTarget).closest('.todo_container').remove()
}

此代码表示从点击的图标向上移动dom以查找.todo_container，然后将其删除。

Answer 3

在JQuery中使用委派但使用它时很好

$(".todo_container").on("click",".fa-trash" , delete_todo);

基本元素$(".todo_container")必须是静态的，您也会在delete_todo()函数中删除它。

尝试使用$(".output")，看看它是否有效。

Answer 4

这是一个工作代码

＆＃13;

$(document).ready(function() {
  $(".input input").on("keypress", check_todo);
  //$(".fa-trash").on("click", ".todo_container", delete_todo);
  $(".todo_container .fa-trash").on("click", delete_todo);
})

// delete todo
let delete_todo = function(e) {
  //e.target.remove();
  $(e.target).parent().remove();
}

// add todo
let add_todo = function() {
  let todo = $(".input input").val();

  //to do container element, the delete icon will added later
  var toDoContainer = $(`
        <div class="todo_container">
            <input type="text" placeholder="Edit To-do" value="${todo}"></div>
        `);

  //create delete icon and set event listener
  var elem = $('<i class="fa fa-trash fa-lg" aria-hidden="true"></i>').on("click", delete_todo).appendTo(toDoContainer);



  $(".output").append(toDoContainer);
  $(".input input").val("");
}

// check todo
let check_todo = (e) => {
  if (e.keyCode == 13) {
    if ($(".input input").val() == "") {
      no_todo();
    } else {
      add_todo();
    }
  }
}

// no todo
let no_todo = () => {
  alert("Please add a new todo");
}

＆＃13;

@font-face {
  font-family: Open Sans;
  src: url("assets/fonts/OpenSans-Regular");
  font-weight: 400
}
@font-face {
  font-family: Open Sans;
  src: url("assets/fonts/OpenSans-Semibold");
  font-weight: 600
}
* {
  margin: 0;
  padding: 0;
  transition: all 200ms ease-in-out;
}
*::selection {
  background-color: #ffffaa;
}
.container {
  width: 60%;
  margin: 20px auto;
}
.header {
  padding: 10px;
}
.header input {
  padding: 10px;
  width: 60%;
  border: none;
  outline: none;
  font: 400 1.8em Open Sans;
}
.to-do {
  padding: 10px;
  text-align: center;
}
.input input {
  padding: 10px;
  width: 40%;
  border: none;
  outline: none;
  font: 600 1em Open Sans;
  border-bottom: 3px solid #333;
}
.output {
  margin: 10px;
}
.output input {
  padding: 20px;
  border: none;
  outline: none;
  font: 600 1em Open Sans;
  width: 50%;
  cursor: pointer;
}
.output input:hover {
  background-color: #eee;
}
.fa-trash {
  padding: 20px;
  cursor: pointer;
}
.fa-trash:hover {
  background-color: #333;
  color: #fff;
}

＆＃13;

<head>
  <title>To-do List</title>

  <!-- FONTS -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500" rel="stylesheet">
</head>

<body>
  <div class="container">

    <header class="header">
      <input type="text" name="edit_name" placeholder="Edit Name">
    </header>

    <section class="to-do">
      <div class="input">
        <input type="text" name="add_todo" placeholder="Click To Add A New To-do">
      </div>

      <div class="output">
        <div class="todo_container">
          <input type="text" placeholder="Edit To-do" value="Todo #1"><i class="fa fa-trash fa-lg" aria-hidden="true"></i>
        </div>

        <div class="todo_container">
          <input type="text" placeholder="Edit To-do" value="Todo #2"><i class="fa fa-trash fa-lg" aria-hidden="true"></i>
        </div>
      </div>
    </section>

  </div>


  <!-- JQUERY -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <script src="https://use.fontawesome.com/5840114410.js"></script>
</body>

＆＃13;

无法从待办事项列表中删除div

4 个答案: