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

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

如何使用按鈕刪除通過 javascript 添加的“待辦事項”列表項

如何使用按鈕刪除通過 javascript 添加的“待辦事項”列表項

千巷貓影 2023-03-03 09:43:58
我正在嘗試創建一個刪除按鈕來刪除相應的列表項。我試過嘗試創建一個 for 循環來遍歷列表項,但是沒有要開始的項,因此沒有要遍歷的數組。不確定我的邏輯是否正確,或者我忽略了什么。這是我的代碼,我需要做什么才能使刪除按鈕起作用?<div class="container">    <h1>TO DO LIST</h1>    <form id="taskForm">      <input id="taskInput"></input>      <button type="button" id="taskButton">Click Here</button>       </form>     <ul id="taskLister"></ul></div><script>    let button = document.getElementById("taskButton");    button.addEventListener('click', () => taskList());    function taskList() {      let item = document.getElementById("taskInput").value;      let newTask = document.createElement("li");      let deleteTaskButton = document.createElement("button");      deleteTaskButton.innertext = item;      newTask.innerText = item;      document.getElementById("taskLister").appendChild(newTask);      document.getElementById("taskLister").appendChild(deleteTaskButton);      if(markTaskComplete) {        newTask.addEventListener('click', (e) => markTaskComplete(e));        deleteTaskButton.addEventListener('click', (i) => removeTask(i));      }    }    function markTaskComplete(e) {      let strikeThrough = e.target;      strikeThrough.style.textDecoration = "line-through";    }    function removeTask(i) {      let deleteTask = i.target;      deleteTask.parentNode.removeChild(li);    }
查看完整描述

2 回答

?
冉冉說

TA貢獻1877條經驗 獲得超1個贊

你很接近,你只需要做一些改變就可以讓它工作:


添加deleteTaskButton作為列表項的子項newTask。您將其添加為同級元素,但如果我們將其設為子元素,則會將其直接與元素相關聯li,因此我們可以輕松找到li您要刪除的元素:

    function taskList() {

      [...]

      document.getElementById("taskLister").appendChild(newTask);

      newTask.appendChild(deleteTaskButton);  // 1. add to the new task li

      [...]

    }

現在在您的removeTask函數中,傳入的單擊按鈕是li您選擇刪除的按鈕的子元素,因此您只需要獲取其父元素并將其刪除:

function removeTask(i) {

  let deleteTask = i.target.parentElement;

  deleteTask.remove();

}

這就是您所需要的!


查看完整回答
反對 回復 2023-03-03
?
HUX布斯

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

工作示例:


let button = document.getElementById("taskButton");

button.addEventListener('click', () => taskList());


function taskList() {

  let item = document.getElementById("taskInput").value;

  let newTask = document.createElement("li");

  let deleteTaskButton = document.createElement("button");

  deleteTaskButton.textContent = "Delete "+item;

  newTask.innerText = item;

  document.getElementById("taskLister").appendChild(newTask);

  newTask.appendChild(deleteTaskButton);    /* 1. ADD BUTTON TO LI */


  if (markTaskComplete) {

    newTask.addEventListener('click', (e) => markTaskComplete(e));

    deleteTaskButton.addEventListener('click', (i) => removeTask(i));

  }

}



function markTaskComplete(e) {

  let strikeThrough = e.target;

  strikeThrough.style.textDecoration = "line-through";

}


function removeTask(i) {

  /* 2. THE BUTTON IS NOW A CHILD OF THE LI, SO DELETE ITS PARENT */

  let deleteTask = i.target.parentElement;

  deleteTask.remove();

}

<div class="container">

  <h1>TO DO LIST</h1>

  <form id="taskForm">

    <input id="taskInput"></input>

    <button type="button" id="taskButton">Click Here</button>

  </form>

  <ul id="taskLister"></ul>

</div>

另外僅供參考,要將文本添加到按鈕,您可以使用textContent而不是innertext,例如


deleteTaskButton.textContent = "Delete "+item;


查看完整回答
反對 回復 2023-03-03
  • 2 回答
  • 0 關注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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