JS：如何使用DOM Java Script从列表中删除项目？

时间：2017-02-04 21:17:41

标签： javascript html list dom removechild

我必须编写一个java脚本代码。我必须创建一个包含水果名称的数组，并在加载html文档后将这些名称作为列表项插入。 加载列表后，用户将输入列表中的任何名称。如果用户输入其他内容，则会生成警报。当用户输入列表中的水果时，该项目将从“水果”列表中删除，并添加到名为＆＃34; basket＆＃34;的第二个列表中。

在我的代码中，我生成了列表并将其插入到文档中。当用户输入名称时，它也会出现在第二个列表中。现在的问题是，我无法弄清楚如果在第二个列表中输入名称，将永久删除第一个列表中的名称。

这是我的Html代码：

＆＃13;
＆＃13; 
// 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");
  }

}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

当我第一次从第一个列表中添加水果时，它将从第一个列表中删除并添加到第二个列表中。但在第一次开始后，它会从列表中随机删除水果。 我希望如果用户输入苹果，它将永久地从第一个列表中删除并添加到第二个列表篮中。因此，如果用户第二次输入苹果，则应生成水果不存在的警报。并且如果用户输入另一个水果，则应该将其添加到篮子列表中并从第一个列表中删除。我无法弄清楚如何做到这一点。我是java脚本的新手，我刚开始学习它。

2 个答案:

答案 0 :(得分：0)

你的主要问题是你在数组中循环并检查数据中是否存在水果，但是你应该检查第一个列表，因为那是将要改变的那个

有关详细信息，请参阅下面的评论：

＆＃13;
＆＃13; 
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");  
  }
}
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
// 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!");
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

另一种方式：

您可以使用click事件获得相同的效果。用户只需单击即可将水果添加到购物篮中。以下是如何做到这一点：

＆＃13;
＆＃13; 
// 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);
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题