JS：如何使用DOM Java腳本從列表中刪除項目？
[英]JS: How to remove items from a list using DOM Java Script?
問題描述
我必須編寫一個Java腳本代碼。 我必須創建一個包含水果名稱的數組，並在html文檔加載后將這些名稱作為列表項插入。 加載列表后，用戶將輸入列表中存在的任何名稱。 如果用戶輸入其他內容，將生成警報。 當用戶輸入列表中的水果時，該項目將從“水果”列表中刪除，並添加到名為“籃子”的第二個列表中。
在我的代碼中，我生成了列表，並將其插入文檔中。 當用戶輸入名稱時，它也會出現在第二個列表中。 現在的問題是，一旦在第二個列表中輸入了該名稱，我就無法確定如何從該列表中永久刪除該名稱。
這是我的HTML代碼：
// JavaScript File var fruit = ["Banana", "Orange", "Apple", "Mango", "Apricot"]; function fruitList() { for (var i = 0; i < fruit.length; i++) { // Create the list item: var list = document.createElement('li'); // Set its contents: var node = document.createTextNode(fruit[i]); list.appendChild(node); var element = document.getElementById('fruits'); element.appendChild(list); } } //////////////////////////////////////////////////// function search() { var flag = false; var fruitName = document.getElementById("newfruit").value; for (var i = 0; i < fruit.length; i++) { if (fruitName === fruit[i]) { // Create the list item: var list = document.createElement('li'); // Set its contents: var node = document.createTextNode(fruitName); list.appendChild(node); var element = document.getElementById('basket'); element.appendChild(list); flag = true; var removeFruit = document.getElementById('fruits'); removeFruit.removeChild(removeFruit.childNodes[i]); } } if (flag == false) { alert("This fruit is not available"); } }
<!DOCTYPE html> <html> <head> <title>ECE 9065 - Lab 2</title> <script src="script.js"></script> <style> h1 { color: pink; background-color: gray; font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans‐serif; } body { color: purple; font-family: Georgia, Cambria, "Times New Roman", serif; } </style> </head> <body background="fruit.jpg"> <h1>Fruit Shelf</h1> <button onclick="fruitList()">Show Fruits available in the shelf</button> <b><ol id="fruits"></ol></b> <b>Pick a fruit:</b> <input type="text" id="newfruit"> <button onclick="search()">Submit</button> <h1>Basket</h1> <b><ol id="basket"></ol></b> </body> </html>
當我第一次從第一個列表中添加水果時，它將從第一個列表中刪除並添加到第二個列表中。 但是在第一次之后，它開始隨機從列表中刪除水果。 我希望如果用戶輸入蘋果，它將被永久從第一個列表中刪除並添加到第二個列表籃中。 因此，如果用戶第二次進入蘋果，則應生成沒有水果的警報。 並且，如果用戶輸入另一個存在的水果，則應將其添加到購物籃列表中並從第一個列表中刪除。 我不知道該怎么做。 我是Java腳本的新手，我才剛剛開始學習它。
2 個解決方案
解決方案1
0 2017-02-04 21:34:47
您的主要問題是您正在遍歷數組並檢查數組中是否存在水果，但是您應該檢查第一個列表，因為那會改變 。
有關詳細信息，請參見下面的內聯評論：
var fruit = ["Banana", "Orange", "Apple", "Mango" , "Apricot"]; // Get references to the two lists, because we'll need to access them more than once var firstList = document.getElementById('fruits'); var secondList = document.getElementById('basket'); function fruitList() { // Loop through the array. That's ok to build the initial list for(var i = 0; i < fruit.length; i++) { // Create the list item: var list = document.createElement('li'); // Set its contents: var node = document.createTextNode(fruit [i]); // Add it to the list list.appendChild(node); // Append list to the document firstList.appendChild(list); } } function search() { var flag = false; var fruitName = document.getElementById("newfruit").value; // Loop through the first list, not the array for (var i = 0; i < firstList.childNodes.length; i++) { // Don't search the Array for a match (you will always find your fruits there), // search the first list if (fruitName === firstList.childNodes[i].textContent) { // Create the list item: var list = document.createElement('li'); // Set its contents: var node = document.createTextNode(fruitName); list.appendChild(node); // Add to the second list secondList.appendChild(list); flag = true; // Remove from the first var removeFruit = document.getElementById('fruits'); removeFruit.removeChild(removeFruit.childNodes[i]); } } if (!flag) { alert("This fruit is not available"); } }
body { color: purple; font-family: Georgia, Cambria, "Times New Roman", serif; } h1 { color: pink; background-color: gray; font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans‐serif; }
<h1 >Fruit Shelf</h1> <button onclick="fruitList()">Show Fruits available in the shelf</button> <b><ol id="fruits"></ol></b> <b>Pick a fruit:</b> <input type="text" id="newfruit"> <button onclick="search()">Submit</button> <h1>Basket</h1> <b><ol id="basket"></ol></b>
解決方案2
0 2017-02-04 21:35:07
無需創建新的列表項並將其追加到購物籃列表，只需在水果列表中搜索已經存在的項目並將其移動到購物籃列表，如下所示：
// JavaScript File var fruit = ["Banana", "Orange", "Apple", "Mango", "Apricot"]; function fruitList() { for (var i = 0; i < fruit.length; i++) { // Create the list item: var list = document.createElement('li'); // Set its contents: var node = document.createTextNode(fruit[i]); list.appendChild(node); var element = document.getElementById('fruits'); element.appendChild(list); } } //////////////////////////////////////////////////// function search() { var flag = true; var fruit = document.getElementById("newfruit").value; // get all the list items from the fruits list var availableFruits = document.querySelectorAll("#fruits li"); // loop through them for(var i = 0; i < availableFruits.length; i++) { var li = availableFruits[i]; // check if the current list item have the same text as the fruit we're looking for (li.textContent.toLowerCase() == fruit.toLowerCase() if you want to ignore case sensitivity) if(li.textContent == fruit) { // if so // append it to the basket list (it will automatically be removed from the fruits list) document.getElementById("basket").appendChild(li); flag = false; //break; // uncomment this if you don't want to loop through the rest of the fruits (if you don't have duplicates) } } if(flag) alert("Fruit unavailable!"); }
<!DOCTYPE html> <html> <head> <title>ECE 9065 - Lab 2</title> <script src="script.js"></script> <style> h1 { color: pink; background-color: gray; font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans‐serif; } body { color: purple; font-family: Georgia, Cambria, "Times New Roman", serif; } </style> </head> <body background="fruit.jpg"> <h1>Fruit Shelf</h1> <button onclick="fruitList()">Show Fruits available in the shelf</button> <b><ol id="fruits"></ol></b> <b>Pick a fruit:</b> <input type="text" id="newfruit"> <button onclick="search()">Submit</button> <h1>Basket</h1> <b><ol id="basket"></ol></b> </body> </html>
另一種方法：
您可以使用click事件獲得相同的效果。 用戶只需單擊即可將水果添加到購物籃。 這是操作方法：
// JavaScript File var fruit = ["Banana", "Orange", "Apple", "Mango", "Apricot"]; function fruitList() { for (var i = 0; i < fruit.length; i++) { var list = document.createElement('li'); var node = document.createTextNode(fruit[i]); list.appendChild(node); var element = document.getElementById('fruits'); element.appendChild(list); // HERE IS THE TRICK list.onclick = chooseItem; } } function chooseItem(event) { // get the li that was clicked var li = event.target; // move it to the basket list document.getElementById("basket").appendChild(li); }
<!DOCTYPE html> <html> <head> <title>ECE 9065 - Lab 2</title> <script src="script.js"></script> <style> h1 { color: pink; background-color: gray; font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans‐serif; } body { color: purple; font-family: Georgia, Cambria, "Times New Roman", serif; } </style> </head> <body background="fruit.jpg"> <h1>Fruit Shelf</h1> <button onclick="fruitList()">Show Fruits available in the shelf</button> <b><ol id="fruits"></ol></b> <b>No need for the textbox just click a fruit to add it!</b> <b><ol id="basket"></ol></b> </body> </html>
使用 Javascript DOM 將從下拉列表中選擇的項目添加到列表中
[英]Adding items selected from dropdown into a list using Javascript DOM
使用filter（）從列表中刪除不包含字符串一部分的項目-jQuery / JS
[英]Using filter() to remove items from a list that DO NOT contain part of a string - jQuery/JS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.