Question

我有一个正在编写的用于跟踪事件的CRUD应用程序，我想在使用我的add函数添加了每个列表元素后向其添加删除按钮。我正在使用JQuery，香草JS和html。当将新项目添加到列表中或刷新文档时，我只能遍历每个项目并在每个项目中添加一个按钮，因此最终删除每个元素。

这里是添加我需要附加删除按钮的项目的功能

// Add an item to the list
  $("#add-text-btn").on("click", function(){

    // Store values from input boxes
    let inputKey = $("#user-input-title").val();
    let inputValue = $("#user-input-body").val();

    if ($("#user-input-title").val() === "") {
      alert("Task needs a name.")
    } else {
      // Clear values from input boxes
      $("#user-input-title").val("");
      $("#user-input-body").val("");

      // Add new property to local storage from input boxes
      window.localStorage.setItem(inputKey, inputValue);

      // Add inputKey and inputValue to the #display container
      let itemHtml = '<li class="display-item" style="display: none;" data-storage-key="'+inputKey+'"> ' + inputKey + ' on ' + '<span class="description">' + window.localStorage.getItem(inputKey) + '</span></li>';
      $(itemHtml).appendTo("#display").show('slow');
    }
    // addCloseButton();
  });

这是链接到的HTML

  </head>
  <body>
  <h1 id="header">Upcoming Events</h1>

  <section id="input">

    <input type="text" id="user-input-title" placeholder="Enter event name:">

    <textarea id="user-input-body" placeholder="Enter event date:"></textarea>

    <textarea  id="user-input-location" placeholder="Enter event location:"></textarea>

    <textarea  id="user-input-time" placeholder="Enter event time:"></textarea>

  </section>

  <section id="buttons">

   <button class="button" id="add-text-btn">Add an event</button>

   <button class="button" id="del-text-btn">Remove event</button>

   <button class="button" id="show-hidden">show hidden</button>

   <button class="button" id="clear-all-btn">Clear events</button>

  </section>

  <span><ul><div id="display"></div></ul></span>

  </body>

Answer 1

您只需在创建的<li>元素上添加一个按钮即可完成此操作。然后，使用一些CSS，可以在按钮上添加边距以根据需要设置样式。

创建后，它最终将看起来像下面的DOM。

<li id="1">Event Name<button>X</button></li>

然后，我添加了一个onclick函数，该函数随后将基于id删除整个<li>元素。也许有更好的方法可以做到这一点，但这应该使您走上正确的轨道。

// Add an item to the list

let index = 0;

$("#add-text-btn").on("click", function() {
  index++;
  // Store values from input boxes
  let inputKey = $("#user-input-title").val();
  let inputValue = $("#user-input-body").val();

  if ($("#user-input-title").val() === "") {
    alert("Task needs a name.")
  } else {
    // Clear values from input boxes
    $("#user-input-title").val("");
    $("#user-input-body").val("");

    // Add new property to local storage from input boxes
    // window.localStorage.setItem(inputKey, inputValue);

    // Add inputKey and inputValue to the #display container
    let itemHtml = '<li id="' + index + '" class="display-item" style="display: none;" data-storage-key="' + inputKey + '"> ' + inputKey + ' on ' + '<span class="description">' + index + '</span><button id="btn' + index + '" class="delete-btn" onclick="deleteEvent(' + index + ');">X</button></li>';
    $(itemHtml).appendTo("#display").show('slow');
  }
});

function deleteEvent(id) {
  $("#" + id).remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <h1 id="header">Upcoming Events</h1>

  <section id="input">

    <input type="text" id="user-input-title" placeholder="Enter event name:">

    <textarea id="user-input-body" placeholder="Enter event date:"></textarea>

    <textarea id="user-input-location" placeholder="Enter event location:"></textarea>

    <textarea id="user-input-time" placeholder="Enter event time:"></textarea>

  </section>

  <section id="buttons">

    <button class="button" id="add-text-btn">Add an event</button>

    <button class="button" id="del-text-btn">Remove event</button>

    <button class="button" id="show-hidden">show hidden</button>

    <button class="button" id="clear-all-btn">Clear events</button>

  </section>

  <span><ul><div id="display"></div></ul></span>

</body>

如何在列表元素上添加按钮以删除CRUD应用程序的相应元素？

1 个答案: