刪除動態創建的表單元素

Question

我一直在嘗試制作一個動態表單，以便用戶可以在他們提交的表單中添加一系列成分。 我能夠動態添加輸入元素，但也想動態刪除它們。 我正在嘗試使用基本的 javascript 而沒有 jquery 來完成所有這些。 我遇到的問題是，如果我將刪除按鈕片段放在 addBtn 單擊事件中，我只能刪除我選擇的一項。 如果我嘗試將代碼片段放在 click 事件之外，我將無法通過 querySelectorAll 獲取我想要的元素數組，因為查詢是在 addBtn 事件偵聽器關閉之前和創建元素之前進行的。 提前致謝！

 const ingredients = () => { const container = document.querySelector(".show-ingredients"); const addBtn = document.querySelector(".add-ingredient"); const newIngredient = document.querySelector("#input-ingredients"); let ingredients = []; newIngredient.required = true; addBtn.addEventListener("click", async() => { newIngredient.required = false; ingredients.push(` <div class="ingredient-container"> <input class='ingredient' type="text" value='${newIngredient.value}' required > <div class="controls delete"> <a class="delete-ingredient"> <span class="ingredient-bar"></span> </a> </div> </div>`); container.innerHTML = ingredients.join(""); newIngredient.value = ""; }); var deleteBtn = document.querySelectorAll(".delete-ingredient"); console.log(deleteBtn); for (let i = 0; i < deleteBtn.length; i++) { deleteBtn[i].addEventListener("click", async() => { console.log(i); // ingredients.splice(i, 1); // container.innerHTML = ingredients.join(''); }); } if (ingredients.length == 0) { newIngredient.required = true; } }; ingredients();

 .form-container { display: flex; text-align: center; flex-direction: column; text-align: center; justify-content: center; align-items: center; transition: all 0.5s ease-in-out; } .form-container input { width: 400px; max-width: 100%; height: 40px; padding-left: 10px; margin-bottom: 5px; } /* Add/delete ingredient */ .ingredient-wrapper { width: 400px; max-width: 100%; display: flex; flex-direction: column; } .ingredient-container { display: flex; align-items: center; justify-content: space-between; height: 40px; width: 400px; max-width: 100%; border: 1px solid grey; margin-bottom: 5px; } .controls, .controls.delete { background-color: green; height: 100%; width: 28px; padding-left: 1px; } .controls.delete { background-color: red; } .ingredient { margin-bottom: 0px; width: 100%; height: 100%; background: none; } .add-ingredient, .delete-ingredient { width: 28px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: 0.5s ease-in-out; cursor: pointer; } .ingredient-bar::before { content: ""; background-color: white; display: block; height: 2px; width: 13px; transform: rotate(90deg); } .ingredient-bar { background-color: white; height: 2px; width: 13px; } .delete-ingredient { background-color: red; } .delete-ingredient .ingredient-bar::before { display: none; }

 <form action="" class="form-container" id="wrapper"> <input type="text" placeholder="What's cookin?" id="input-title" style="margin-top: 20px;" required> <div class="ingredient-wrapper"> <div class="ingredient-container"> <input type="text" placeholder="Ingredients" id="input-ingredients" style="border: none; margin-bottom: 0px; width: 400px;max-width:100%; height: 100%;"> <div class="controls"> <a class="add-ingredient"> <span class="ingredient-bar"></span> </a> </div> </div> <div class="show-ingredients"></div> </div> <input type="text" placeholder="Description/Instructions" id="input-description" required> <button type="submit" class="add-btn">Add post</button> </form>

一個示例代碼筆： https ://codepen.io/benleem/pen/gOxgXWL（css 搞砸了，但功能相同）

Answer 1

您應該能夠通過將.delete-ingredient選擇器和addEventListener到一個單獨的函數中來獲得所需的結果。

這是一個片段，它記錄了deletBtn數組中的位置。 我沒有更改 HTML 或 CSS。 我應該添加的另一個小注意事項是，成分數組未正確連接到刪除按鈕，因為您每次都重新聲明該數組（全局數組與本地數組）。 但是，您實際上並不需要該數組，因為您可以使用deleteBtn[i]選擇特定元素，然后可以使用 JavaScript .removeChild功能將其刪除。

 const ingredients = () => { const container = document.querySelector(".show-ingredients"); const addBtn = document.querySelector(".add-ingredient"); const newIngredient = document.querySelector("#input-ingredients"); let ingredients = []; newIngredient.required = true; addBtn.addEventListener("click", async () => { newIngredient.required = false; ingredients.push(` <div class="ingredient-container"> <input class='ingredient' type="text" value='${newIngredient.value}' required > <div class="controls delete"> <a class="delete-ingredient"> <span class="ingredient-bar"></span> </a> </div> </div>`); container.innerHTML = ingredients.join(""); newIngredient.value = ""; deleteIngredient(ingredients, container); }); if (ingredients.length == 0) { newIngredient.required = true; } }; const deleteIngredient = (list, wrapper) =>{ let ingredients = list; let container = wrapper; var deleteBtn = document.querySelectorAll('.delete-ingredient'); for (let i = 0; i < ingredients.length; i++) { deleteBtn[i].addEventListener('click', async () =>{ console.log(i); ingredients.splice(i, 1); container.innerHTML = ingredients.join(''); deleteIngredient(ingredients, container); }); } } ingredients();

 .form-container { display: flex; text-align: center; flex-direction: column; text-align: center; justify-content: center; align-items: center; transition: all 0.5s ease-in-out; } .form-container input { width: 400px; max-width: 100%; height: 40px; padding-left: 10px; margin-bottom: 5px; } /* Add/delete ingredient */ .ingredient-wrapper { width: 400px; max-width: 100%; display: flex; flex-direction: column; } .ingredient-container { display: flex; align-items: center; justify-content: space-between; height: 40px; width: 400px; max-width: 100%; border: 1px solid grey; margin-bottom: 5px; } .controls, .controls.delete { background-color: green; height: 100%; width: 28px; padding-left: 1px; } .controls.delete { background-color: red; } .ingredient { margin-bottom: 0px; width: 100%; height: 100%; background: none; } .add-ingredient, .delete-ingredient { width: 28px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: 0.5s ease-in-out; cursor: pointer; } .ingredient-bar::before { content: ""; background-color: white; display: block; height: 2px; width: 13px; transform: rotate(90deg); } .ingredient-bar { background-color: white; height: 2px; width: 13px; } .delete-ingredient { background-color: red; } .delete-ingredient .ingredient-bar::before { display: none; }

 <form action="" class="form-container" id="wrapper"> <input type="text" placeholder="What's cookin?" id="input-title" style="margin-top: 20px;" required> <div class="ingredient-wrapper"> <div class="ingredient-container"> <input type="text" placeholder="Ingredients" id="input-ingredients" style="border: none; margin-bottom: 0px; width: 400px;max-width:100%; height: 100%;"> <div class="controls"> <a class="add-ingredient"> <span class="ingredient-bar"></span> </a> </div> </div> <div class="show-ingredients"></div> </div> <input type="text" placeholder="Description/Instructions" id="input-description" required> <button type="submit" class="add-btn">Add post</button> </form>