JS：如何使用 DOM Java 脚本从列表中删除项目？答案

【问题标题】：JS: How to remove items from a list using DOM Java Script?JS：如何使用 DOM Java 脚本从列表中删除项目？
【发布时间】：2017-06-22 02:11:23
【问题描述】：

我必须编写一个 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脚本很陌生，我刚刚开始学习它。

【问题讨论】：

Removing li elements from ul的可能重复

标签： javascript html list dom removechild

【解决方案1】：

您的主要问题是您正在遍历您的数组并检查数组中是否存在水果，但您应该检查第一个列表，因为那会发生变化。

详见下面的内联 cmets：

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】：

无需创建新的列表项并将其附加到购物篮列表，只需在水果列表中搜索已经存在的项目并将其移动到购物篮列表，如下所示：

// 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>

另一种方法：

您可以使用点击事件来实现相同的效果。用户只需单击即可将水果添加到篮子中。操作方法如下：

// 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>

【讨论】：