亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何制作一個刪除其所在 li 元素的按鈕

如何制作一個刪除其所在 li 元素的按鈕

白衣染霜花 2023-12-14 17:09:32
我正在嘗試創建一個普通的 javascript 待辦事項應用程序。我不想使用 jquery，因為我不知道它是如何工作的；）我需要一個輸入，可以填寫任務，單擊按鈕添加任務，還需要一個按鈕來清除輸入字段。添加任務后，應該有一個帶有“X”的按鈕來刪除該特定列表項。我不知道如何在 li 元素內創建按鈕，單擊時刪除該 li 元素。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.onclick = function() {    deleteButton.remove  }  let complete = deleteButton + listitem;  return complete;}<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" 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>
查看完整描述

3 回答

?
阿波羅的戰車

TA貢獻1862條經驗 獲得超6個贊

這就是委托的目的：

現在，在菜單中單擊任何刪除按鈕都將刪除其所在的 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>


查看完整回答
反對 回復 2023-12-14
?
繁花不似錦

TA貢獻1851條經驗 獲得超4個贊

  1. 您可以將刪除按鈕附加到列表項。

  2. 您可以.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>


查看完整回答
反對 回復 2023-12-14
?
SMILET

TA貢獻1796條經驗 獲得超4個贊

您所需要的只是動態創建的“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>


查看完整回答
反對 回復 2023-12-14
  • 3 回答
  • 0 關注
  • 193 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號