Javascript删除按钮

Question

我无法使删除按钮在html的js端正常工作。我是学习Web开发的新手！我非常需要一些帮助/指导。非常感谢。

这是我的html：

enter code here

删除笔记本！

删除菠菜！

删除饭！

生日蛋糕删除！

删除蜡烛！

这是我的JavaScript：

     var button = document.getElementById("enter"); //getelement is to obtain infor from button
     var input = document.getElementById("userinput"); //getelement to obtain infor from input
     var ul = document.querySelector("ul");
     var li = document.getElementsByTagName("li");
     var delt = document.getElementsByClassName("delt");

   function delt(event) {
       if (button.onclick === "Delete") {
       event.target.parentNode.remove();
     }
  }

   ul.addEventListener("click", delt);

Answer 1

首先，您不能重复名称，因此您应该更改delt函数的名称

作为推荐，请尝试根据功能来命名功能

function deleteItem(e){
  console.log("Button element", e)
  e.parentElement.remove()
}

<ul>
  <li>Item 1 <button onclick="deleteItem(this)">Delete</button></li>
  <li>Item 2 <button onclick="deleteItem(this)">Delete</button></li>
  <li>Item 3 <button onclick="deleteItem(this)">Delete</button></li>
  <li>Item 4 <button onclick="deleteItem(this)">Delete</button></li>
  <li>Item 5 <button onclick="deleteItem(this)">Delete</button></li>
</ul>

通过编写deleteItem(this)，您可以将元素对象传递给函数

如果您希望您的按钮通过event起作用，则只需将this更改为event

顺便说一句，将HTML && JS代码放在同一个位置不是一个好习惯，所以您应该这样操作

window.addEventListener("DOMContentLoaded", function(event){
  // Once DOM is loaded add onclick function
  // Select all buttons with class "btn-delete"
  document.querySelectorAll('button.btn-delete').forEach(el => {
    // Walk each selected button and set onclick function
    // remember to declare event function within a wrapper if you're gonna pass a var
    el.onclick = () => deleteItem(el)
    /* "() => Code" is called arrow function
    * it's the same as a regular anonymous function
      function(){Code}
    */
    // if you want to just execute the function
    // el.onclick = deleteItem
  })
});
// Declare your function outer the DOMContentLoaded event listener
function deleteItem(e){
  // e is the element object, so you do not need to get .target
  e.parentElement.remove()
}

<ul>
  <li>Item 1 <button class="btn-delete">Delete</button></li>
  <li>Item 2 <button class="btn-delete">Delete</button></li>
  <li>Item 3 <button class="btn-delete">Delete</button></li>
  <li>Item 4 <button class="btn-delete">Delete</button></li>
  <li>Item 5 <button class="btn-delete">Delete</button></li>
</ul>

它们的工作原理相同，但是最好习惯于该组织，这样，当您的代码长大后，它就不会是意大利面条式的代码

如果您想进一步了解该信息，请检查此link