如何使用 JavaScript 刪除已新增的清單項目？-js教程-PHP中文網

如何使用 JavaScript 刪除已新增的清單項目？

王林

發布： 2023-09-13 21:25:08

轉載

1156 人瀏覽過

如何使用 JavaScript 删除已添加的列表项？

在 HTML 中，開發人員可以使用「ul」標籤來建立專案清單。我們可以將所有相關項目新增到單一清單中。我們也可以使用 JavaScript 來管理列表項目。

有時，開發人員需要使用 JavaScript 新增或刪除清單項目。我們可以使用特定的屬性值存取清單項，並使用removechild()方法刪除清單項目。

在本教程中，我們將從使用者那裡取得輸入，並根據值刪除清單項目。

文法

使用者可以依照以下語法使用javaScript刪除新增的清單項目

var item = document.getElementById(ID);
list.removeChild(item);

登入後複製

在上面的語法中，我們使用 id 來存取清單項目。之後，我們使用removechild()方法從清單中刪除選定的清單項目。

範例1（從清單中刪除動態元素）

在下面的範例中，我們建立了 id 等於「汽車」的清單。此外，我們還建立了輸入框來從使用者那裡獲取清單項目的值。此外，我們還建立了新增汽車和刪除汽車按鈕，當使用者點擊對應按鈕時，按鈕會呼叫 addCar() 和 removeCar() 函數。

在 JavaScript 中，我們存取清單和文字輸入值。在addCar()函數中，我們先建立列表項，然後設定列表項的id。接下來，我們建立一個文字節點，將其附加到清單項，然後使用appendchild()方法將清單項目附加到清單。

<html>
<body>
    <h2> Removing the <i> dynamic list items </i> from the list using JavaScript</h2>
    <ul id = "cars">
    </ul>
    <input type = "text" id = "carName" />
    <button onclick = "addCar()"> Add car </button>
    <button onclick = "removeCar()"> Remove car </button>
    <script>
        var carList = document.getElementById("cars");
        var carName = document.getElementById("carName");
        function addCar() {
            var li = document.createElement("li");
            li.setAttribute('id', carName.value);
            let text = document.createTextNode(carName.value);
            li.appendChild(text);
            carList.appendChild(li);
        }
        function removeCar() {
            var item = document.getElementById(carName.value);
            carList.removeChild(item);
        }
    </script>
</html>

登入後複製

範例 2（從清單中刪除最後一個元素）

在下面的範例中，我們使用 JavaScript 從清單中刪除最後一個清單項目。此範例與第一個範例非常相似，但不同之處在於我們刪除了本範例中的最後一個清單項目以及第一個範例中的動態清單項目。

在removeCar()函數中，我們使用‘lastElementChild’屬性來取得清單的最後一個子元素。之後，我們刪除最後一個元素（如果存在）。

在輸出中，使用者可以將多個項目新增到清單中，然後按一下刪除按鈕來刪除清單元素。

<html>
<body>
    <h2> Removing the <i> last list item </i> from the list using JavaScript </h2>
    <ul id = "cars">
    </ul>
    <input type = "text" id = "carName" />
    <button onclick = "addCar()"> Add car </button>
    <button onclick = "removeCar()"> Remove last car </button>
    <script>
        var carList = document.getElementById("cars");
        var carName = document.getElementById("carName");
        function addCar() {
            var li = document.createElement("li");
            li.setAttribute('id', carName.value);
            let text = document.createTextNode(carName.value);
            li.appendChild(text);
            carList.appendChild(li);
        }
        // function to remove the last element from the list
        function removeCar() {
            // select the last element
            var lastElement = carList.lastElementChild;
            // if the last element is present, then remove it
            if (lastElement) {
                carList.removeChild(lastElement);
            }
        }
    </script>
</html>

登入後複製

範例 3

在下面的範例中，我們使用 JavaScript 刪除所有清單項目。在這裡，我們建立了項目清單。

在 JavaScript 中，我們定義了 addItem() 函數來新增項目，並定義了clearAll() 函數來從清單中刪除所有項目。在clearAll()函數中，我們使用「firstchild」屬性來取得清單的第一個子級，並使用removechild()方法來刪除該子級。我們使用 while 迴圈進行迭代，直到刪除清單的所有子項目。

在輸出中，使用者可以按下全部清除按鈕從清單中刪除所有項目。

<html>
<body>
   <h2> Removing the <i> all last list items </i> from the list using JavaScript</h2>
   <ul id = "itmes">
   </ul>
   <input type = "text" id = "itemValue" />
   <button onclick = "addItems()"> Add itmes </button>
   <button onclick = "clearAll()"> clear list </button>
   <script>
      var items = document.getElementById("itmes");
      var itemValue = document.getElementById("itemValue");
      function addItems() {
         var li = document.createElement("li");
         li.setAttribute('id', itemValue.value);
         let text = document.createTextNode(itemValue.value);
         li.appendChild(text);
         items.appendChild(li);
        }
        // function to clear all the list items
      function clearAll() {
         while (items.firstChild) {
         items.removeChild(items.firstChild);
         }
      }
   </script>
</html>

登入後複製