如何对我的无序列表元素旁边的按钮进行编程，以在单击时删除其关联的列表元素？

问题描述 投票：0回答：1

我正在尝试制作一个简单的待办事项列表应用程序，希望每个列表元素旁边的按钮在单击时具有删除各自元素的效果。到目前为止，我的代码如下：

   <html lang="en" dir="ltr">
 <head>
    <meta charset="utf-8">
    <title>To-Do List</title>
  </head>
  <body>
    <h1>To-Do List</h1>
    <input type="text" id="input"/>
    <input type="button" value="Add Note" id="add"/>
    <ul id="list"></ul>
    <script charset="utf-8">
    document.getElementById("add").onclick = function() {
    var text = document.getElementById("input").value;
    var li = "<li>" + text + "<button>Delete</button></li>";
    document.getElementById("list").insertAdjacentHTML('beforeend', li);
    document.getElementById("input").value = ""; // clear the value
  }
    </script>
  </body>
</html>
javascript html
1个回答
0
投票

您可以在删除按钮上添加click侦听器，并在单击时删除其父级（li），如下所示：

document.getElementById("add").onclick = function() {
    var text = document.getElementById("input").value;
    var li = "<li>" + text + "<button onclick='deleteItem(this)'>Delete</button></li>";
    document.getElementById("list").insertAdjacentHTML('beforeend', li);
    document.getElementById("input").value = ""; // clear the value
}

function deleteItem(btn){
    btn.parentNode.parentNode.removeChild(btn.parentNode)
}
<html lang="en" dir="ltr">
 <head>
    <meta charset="utf-8">
    <title>To-Do List</title>
  </head>
  <body>
    <h1>To-Do List</h1>
    <input type="text" id="input"/>
    <input type="button" value="Add Note" id="add"/>
    <ul id="list"></ul>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.