jQuery/Javascript 无法让 "check" 按钮删除附加列表项的名称文本

Question

一直在尝试创建一个输入，该输入创建一个输入到输入中的列表项。创建新创建的项目后，我试图让用户按下 "check" 按钮并将项目的标题更改为 strike-through.

我尝试使用事件委托来单击附加项上的按钮，但无法正常工作！

如有任何帮助，我们将不胜感激！

$(function() {
  $(".shopping-list").empty(); //clear the list when the browser is loaded for the first time

  $('#js-shopping-list-form').submit(event => { //submission event

    event.preventDefault() //prevent default submission behavior

    //grab the value written in the add an item input
    const shopItemEntry = $(event.currentTarget).find(
      'input[name="shopping-list-entry"]').val();

    //create a new list item for the new item written in in the input and add it to <ul class="shopping-list">
    $('.shopping-list').append(`<li>
        <span class="shopping-item">${shopItemEntry}</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>`);

 //listen for when the user clicks check.  Add strikethrough to text for the item who's button is checked.
    $('.ul').on('click', '.shopping-item', 'shopping-item-controls', '.shopping-item-toggle', function(event) {
      $(this).closest('li.span').toggleClass('shopping-item__checked');
    });

    //listen for when the user clicks delete.  Make the delete remove the item
    $('.shopping-item-delete').click(function(event) {
      this.closest('li').remove(); //remove the shopping item entry
    });


  });
});

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

button,
input[type="text"] {
  padding: 5px;
}

button:hover {
  cursor: pointer;
}

#shopping-list-item {
  width: 250px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.shopping-list {
  list-style: none;
  padding-left: 0;
}

.shopping-list>li {
  margin-bottom: 20px;
  border: 1px solid grey;
  padding: 20px;
}

.shopping-item {
  display: block;
  color: grey;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 15px;
}

.shopping-item-checked {
  text-decoration: line-through;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Shopping List</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <link rel="stylesheet" href="main.css">
</head>

<body>

  <div class="container">
    <h1>Shopping List</h1>

    <form id="js-shopping-list-form">
      <label for="shopping-list-entry">Add an item</label>
      <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
      <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list">

      <li>
        <span class="shopping-item shopping-item__checked">apples</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>

      <li>
        <span class="shopping-item">oranges</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">milk</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">bread</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="index.js"></script>


</body>

</html>

Answer 1

您添加的 class 不是 css 中定义的内容（.shopping-item__checked 与 .shopping-item-checked）。事件发生时要操作的事件和元素的选择器也不正确。检查和删除处理程序在表单提交处理程序中声明，这意味着每次将项目添加到列表时都会重复注册。请参阅下面的更新代码。

$(function() {
  $(".shopping-list").empty(); //clear the list when the browser is loaded for the first time

  $("#js-shopping-list-form").submit(event => {
    //submission event

    event.preventDefault(); //prevent default submission behavior

    //grab the value written in the add an item input
    const shopItemEntry = $(event.currentTarget)
      .find('input[name="shopping-list-entry"]')
      .val();

    //create a new list item for the new item written in in the input and add it to <ul class="shopping-list">
    $(".shopping-list").append(`<li>
        <span class="shopping-item">${shopItemEntry}</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>`);
  });

  //listen for when the user clicks check.  Add strikethrough to text for the item who's button is checked.
  $(".shopping-list").on("click", ".shopping-item-toggle", function(event) {
    $(this)
      .closest("li")
      .find(".shopping-item")
      .toggleClass("shopping-item__checked");
  });

  //listen for when the user clicks delete.  Make the delete remove the item
  $(".shopping-list").on("click", ".shopping-item-delete", function(event) {
    this.closest("li").remove(); //remove the shopping item entry
  });
});

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

button,
input[type="text"] {
  padding: 5px;
}

button:hover {
  cursor: pointer;
}

#shopping-list-item {
  width: 250px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.shopping-list {
  list-style: none;
  padding-left: 0;
}

.shopping-list>li {
  margin-bottom: 20px;
  border: 1px solid grey;
  padding: 20px;
}

.shopping-item {
  display: block;
  color: grey;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 15px;
}

.shopping-item__checked {
  text-decoration: line-through;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Shopping List</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <link rel="stylesheet" href="main.css">
</head>

<body>

  <div class="container">
    <h1>Shopping List</h1>

    <form id="js-shopping-list-form">
      <label for="shopping-list-entry">Add an item</label>
      <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
      <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list">

      <li>
        <span class="shopping-item shopping-item__checked">apples</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>

      <li>
        <span class="shopping-item">oranges</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">milk</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">bread</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="index.js"></script>


</body>

</html>

jQuery/Javascript 无法让 "check" 按钮删除附加列表项的名称文本

jQuery/Javascript Can't get the "check" button to strike through an appended list item's name text

javascript

jquery

dom

event-listener

event-propagation