如何制作一个删除其所在 li 元素的按钮

3回答

阿波罗的战车

这就是委托的目的：现在，在菜单中单击任何删除按钮都将删除其所在的 LI我还删除了内联处理程序，因为这是推荐的const menu = document.getElementById("ul");function createTask(taskName) {  let listitem = document.createElement("li");  listitem.textContent = taskName;  let deleteButton = document.createElement("button")  deleteButton.textContent = 'Delete';  deleteButton.classList.add('delete')  deleteButton.style.marginLeft = '5px';  listitem.appendChild(deleteButton);  return listitem;}document.getElementById('addButton').addEventListener('click', function() {  var taskName = document.getElementById("addToDo").value;  if (taskName.trim() === "") return; // no need to add an empty task  menu.appendChild(createTask(taskName));  document.getElementById("clear").click();})document.getElementById('clear').addEventListener('click', function() {  document.getElementById('addToDo').select();})menu.addEventListener('click', function(e) {  const tgt = e.target;  if (tgt.classList.contains('delete')) tgt.closest('li').remove();})ul {  font-family: 'Montserrat', sans-serif;  font-weight: 100;}<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'><div id="divContainer">  <div id="Title">    <p>To-Do list</p>  </div>  <div id="divAddToDo">    <input id="addToDo" type="text" placeholder="Make a new task"><br>    <input id="addButton" type="button" value="Add!">    <button class="butong" id="clear">Clear</button>  </div>  <div id="list">    <ul id="ul">      <li>Dit is alleen om even te</li>      <li>laten zien dat het werkt</li>    </ul>  </div></div>

0 0

繁花不似锦

您可以将删除按钮附加到列表项。您可以.remove在单击事件侦听器内调用列表项，因为您有对它的引用。const menu = document.getElementById("ul");function callThisOne() {  var Task = document.getElementById("addToDo").value;  menu.appendChild(Create(Task));  document.getElementById("addToDo").value = '';}function Create(name) {  let listitem = document.createElement("li");  listitem.textContent = name;  let deleteButton = document.createElement("button")  deleteButton.textContent = 'Delete';  deleteButton.style.marginLeft = '5px';  deleteButton.onclick = function() {    listitem.remove();  }  listitem.appendChild(deleteButton);  return listitem;}<!DOCTYPE html><html><head>  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>  <link href="ToDo.css" rel="stylesheet"></head><body>  <div id="divContainer">    <div id="Title">      <p>To-Do list</p>    </div>    <div id="divAddToDo">      <input id="addToDo" type="text" placeholder="Make a new task"><br>      <input id="addButton" onclick="callThisOne()" type="button" value="Add!">      <button class="butong" onclick="document.getElementById('addToDo').value = ''">Clear</button>    </div>    <div id="list">      <ul id="ul">        <li>Dit is alleen om even te</li>        <li>laten zien dat het werkt</li>      </ul>    </div>  </div></body></html>

0 0

SMILET

您所需要的只是动态创建的“X”按钮来查找最近的li祖先，这可以使用该方法完成.closest()，然后调用.remove()它。其他：您确实不应该使用内联 HTML 事件属性，例如onclick. 这是一种已有 25 多年历史的技术，用于设置事件，但它不会像应有的那样消亡，因为它很容易做到，而且大多数新程序员只是复制别人无意中使用它的代码。更不用说臭名昭著的 W3 Schools 网站仍然错误地提倡这种方法。相反，在 JavaScript 中进行所有事件绑定，而不是使用事件属性的其他非常古老的技术，例如，使用更强大的onclick现代技术。.addEventListener()您可以在下面的代码中看到 HTML 是多么干净，因为除了 HTML 之外什么都没有。const input = document.querySelector("input");const list = document.querySelector("ul");document.querySelector("button.clear").addEventListener("click", function(evt){ list.innerHTML = "";});document.querySelector("button").addEventListener("click", function(evt){ const item = document.createElement("li"); item.textContent = input.value; input.value = ""; const delBtn = document.createElement("button"); delBtn.classList.add("delete"); delBtn.textContent = "X" delBtn.addEventListener("click", function(evt){ // Find the nearest <li> ancestor element and remove it this.closest("li").remove(); }); item.appendChild(delBtn); list.appendChild(item);});.delete { font-weight:bold; margin-left:1em; }<input><button>ADD</button><ul></ul><button class="clear">Clear</button>

0 0