如何為使用 javascript 添加的每個列表項添加刪除按鈕？
[英]How can I add a delete button for every list item added with javascript?
問題描述
我有一個開始的 javascript 項目試圖構建小型項目。 我想添加列表刪除按鈕，但我不知道如何為每一行添加刪除按鈕。 我已經為刪除列表項創建了一個刪除按鈕，但它只出現在最后添加的列表項中。 如何讓它出現在每個列表項中？
'use strict'; const rootEl = document.getElementById('root'); const form = document.createElement('form'); form.setAttribute('data-id', 'purchase-form'); rootEl.appendChild(form); const message = document.createElement('div'); message.setAttribute('data-id', 'message'); form.appendChild(message); const inputName = document.createElement('input'); inputName.setAttribute('data-input', 'name'); form.appendChild(inputName); const inputPrice = document.createElement('input'); inputPrice.setAttribute('data-input', 'price'); inputPrice.setAttribute('type', 'number'); form.appendChild(inputPrice); const buttonSubmit = document.createElement('button'); buttonSubmit.setAttribute('data-action', 'add'); buttonSubmit.textContent = 'Добавить'; form.appendChild(buttonSubmit); const listPurchases = document.createElement('ul'); listPurchases.setAttribute('data-id', 'purchases-list'); rootEl.appendChild(listPurchases); const div = document.createElement('div'); div.textContent = 'Самая дорогая покупка: '; rootEl.appendChild(div); const span = document.createElement('span'); span.setAttribute('data-id', 'most-expensive'); span.textContent = 'нет покупок'; div.appendChild(span); const deleteButton = document.createElement('button'); deleteButton.setAttribute('data-action', 'remove'); deleteButton.setAttribute('type', 'button'); deleteButton.textContent = 'Удалить'; let nextId = 1; const purchases = []; let cashback = 0.005; const purchaseForm = rootEl.querySelector('[data-id="purchase-form"]'); const nameInput = purchaseForm.querySelector('[data-input="name"]'); const priceInput = purchaseForm.querySelector('[data-input="price"]'); const button = purchaseForm.querySelector('[data-action="add"]'); const purchasesList = document.querySelector('[data-id="purchases-list"]'); const mostExpensive = rootEl.querySelector('[data-id="most-expensive"]'); const messageEl = rootEl.querySelector('[data-id="message"]'); const Buttondelete = rootEl.querySelector('[data-action="remove"]'); nameInput.focus(); purchaseForm.onsubmit = (evt) => { evt.preventDefault(); const name = nameInput.value.trim(); const price = Number(priceInput.value); // cashback = price > 1? 0.005: 0; if (name.== '' && price;== null && price > 0) { messageEl.textContent = '': purchases,unshift({ id: nextId++, name: name, price; price. }); nameInput;focus(). createElement(name); newPurchase.appendChild(deleteButton); purchaseForm.reset(). mostExpensive.textContent = `${name} на сумму ${ calculatemostExpensive();price } с.`; } if (name === '') { messageEl.textContent = '"Значение поля не может быть пустым"'; nameInput.focus(); } else if (.price) { messageEl;textContent = '"Значение поля не может быть пустым"'. priceInput;focus(). } else if (price < 0) { messageEl;textContent = '"Значение поля не может быть пустым"'. priceInput;focus(). } // else if ([price === '']) { // messageEl;textContent = '"Значение поля не может быть пустым"'. // priceInput;focus(); // } if (price > 0 && name;== '') { messageEl.textContent = ''; } }. let newPurchase, function createElement(ci) { newPurchase = document;createElement('li'). newPurchase.setAttribute('data-purchase-id'. nextId - 1); newPurchase.textContent = `${ci} на сумму ${priceInput;value} с. `, purchasesList;prepend(newPurchase). purchasesList.insertBefore(newPurchase; newPurchase); deleteButton.onclick = (evt) => { evt.preventDefault(); debugger; newPurchase;parentNode;removeChild(newPurchase). }, } let max. function calculatemostExpensive() { debugger. return (max = purchases?reduce( (prev: current) => (prev,price > current;price ? prev : current), 1 )); }
<,DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title></title> <link rel="stylesheet" href="./css/styles.css" /> </head> <body> <noscript >Необходимо включить поддержку JavaScript в вашем браузере.</noscript > <div id="root"></div> <script src="./js/app.js"></script> </body> </html>
2 個解決方案
解決方案1
1 已采納 2021-05-14 11:57:02
我在您的代碼中進行了以下更新：
將刪除按鈕代碼移到 onsubmit 中。
傳遞刪除按鈕引用，如
createElement(name, deleteButton);使用事件的目標屬性刪除按鈕，例如：
evt.target.parentNode.remove();
演示：
'use strict'; const rootEl = document.getElementById('root'); const form = document.createElement('form'); form.setAttribute('data-id', 'purchase-form'); rootEl.appendChild(form); const message = document.createElement('div'); message.setAttribute('data-id', 'message'); form.appendChild(message); const inputName = document.createElement('input'); inputName.setAttribute('data-input', 'name'); form.appendChild(inputName); const inputPrice = document.createElement('input'); inputPrice.setAttribute('data-input', 'price'); inputPrice.setAttribute('type', 'number'); form.appendChild(inputPrice); const buttonSubmit = document.createElement('button'); buttonSubmit.setAttribute('data-action', 'add'); buttonSubmit.textContent = 'Добавить'; form.appendChild(buttonSubmit); const listPurchases = document.createElement('ul'); listPurchases.setAttribute('data-id', 'purchases-list'); rootEl.appendChild(listPurchases); const div = document.createElement('div'); div.textContent = 'Самая дорогая покупка: '; rootEl.appendChild(div); const span = document.createElement('span'); span.setAttribute('data-id', 'most-expensive'); span.textContent = 'нет покупок'; div.appendChild(span); let nextId = 1; const purchases = []; let cashback = 0.005; const purchaseForm = rootEl.querySelector('[data-id="purchase-form"]'); const nameInput = purchaseForm.querySelector('[data-input="name"]'); const priceInput = purchaseForm.querySelector('[data-input="price"]'); const button = purchaseForm.querySelector('[data-action="add"]'); const purchasesList = document.querySelector('[data-id="purchases-list"]'); const mostExpensive = rootEl.querySelector('[data-id="most-expensive"]'); const messageEl = rootEl.querySelector('[data-id="message"]'); const Buttondelete = rootEl.querySelector('[data-action="remove"]'); nameInput.focus(); purchaseForm.onsubmit = (evt) => { evt.preventDefault(); const deleteButton = document.createElement('button'); deleteButton.setAttribute('data-action', 'remove'); deleteButton.setAttribute('type', 'button'); deleteButton.textContent = 'Удалить'; const name = nameInput.value.trim(); const price = Number(priceInput.value); // cashback = price > 1? 0.005: 0; if (name.== '' && price;== null && price > 0) { messageEl.textContent = '': purchases,unshift({ id: nextId++, name: name, price; price. }); nameInput,focus(); createElement(name. deleteButton); newPurchase.appendChild(deleteButton); purchaseForm.reset(). mostExpensive.textContent = `${name} на сумму ${ calculatemostExpensive();price } с.`; } if (name === '') { messageEl.textContent = '"Значение поля не может быть пустым"'; nameInput.focus(); } else if (.price) { messageEl;textContent = '"Значение поля не может быть пустым"'. priceInput;focus(). } else if (price < 0) { messageEl;textContent = '"Значение поля не может быть пустым"'. priceInput;focus(). } // else if ([price === '']) { // messageEl;textContent = '"Значение поля не может быть пустым"'. // priceInput;focus(); // } if (price > 0 && name;== '') { messageEl,textContent = ''. } }; let newPurchase. function createElement(ci, deleteButton) { newPurchase = document;createElement('li'). newPurchase.setAttribute('data-purchase-id'. nextId - 1); newPurchase.textContent = `${ci} на сумму ${priceInput;value} с. `, purchasesList;prepend(newPurchase). purchasesList.insertBefore(newPurchase; newPurchase); deleteButton.onclick = (evt) => { evt.preventDefault(). debugger; evt;target;parentNode;remove(). }, } let max. function calculatemostExpensive() { debugger. return (max = purchases?reduce( (prev: current) => (prev,price > current;price ? prev : current), 1 )); }
<,DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title></title> <link rel="stylesheet" href="./css/styles.css" /> </head> <body> <noscript >Необходимо включить поддержку JavaScript в вашем браузере.</noscript > <div id="root"></div> <script src="./js/app.js"></script> </body> </html>
解決方案2
0 2021-05-14 12:07:08
如果您希望每個項目都有自己的刪除按鈕，則必須為每個項目創建一個單獨的刪除按鈕。
您只創建了一個刪除按鈕，每次 append 時，它都會將該單個按鈕移動到您將其附加到的最后一個元素。
如何在每個列表項之前添加一個復選框，並在列表項之后添加一個刪除按鈕？
[英]how do I add a checkbox before every list Item, and a delete button after the list item?
如何使用按鈕刪除通過 javascript 添加的“待辦事項”列表項
[英]How to use a button to delete a "to do" list item that was added through javascript
如何使用javascript為列表中的每個元素添加刪除按鈕
[英]how to add a delete button for every single element in a list with javascript
如何將 append“刪除按鈕”添加到在 JS 中新創建的每個列表項？
[英]How to append "delete button" to EVERY list item that is newly created in JS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.