时间戳

首页 > 解决方案 > 如何对我的无序列表元素旁边的按钮进行编程以在单击时删除其关联列表元素？

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

问题描述

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

<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>

标签： javascripthtml

解决方案

您可以将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>

推荐阅读