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

在下面的文章中，我们将使用 JavaScript 动态添加和删除列表项。我们使用 JavaScript 动态添加和/或删除列表项，这意味着如果我们运行我们的网页，它将显示使用按钮添加和删除项的选项。

方法：在网页中，给出一个输入文本框，供用户输入添加列表项。提供了两个按钮来添加列表项和删除列表项。使用 JavaScript 函数addItem()和removeItem()添加或删除列表项。列表项是使用document.createElement()方法创建的，为了创建文本节点，使用document.createTextNode()方法，然后使用appendChild()方法附加该节点。使用removeChild( ) 方法删除列表项。

下面列出了使用的内置函数。

• 创建新元素：我们可以使用document.createElement()函数创建新元素。它将动态创建元素。
• 追加元素：我们可以使用函数appendchild()追加元素。
• 创建文本节点：我们可以使用document.createTextNode()元素创建一个文本节点。 HTML 由一个元素节点和一个文本节点组成。所以createTextNode()方法创建一个带有指定文本的文本节点。
• 删除现有元素：我们可以使用removechild()函数从创建的列表中删除一个子元素。

示例：以下代码演示了使用 JavaScript 函数添加和删除列表项。

HTML

 

 
    
        #candidate {
            border-radius: 20%;
            border-color: aquamarine;
            box-sizing: border-box;
        }
         
        .buttonClass {
            border-radius: 20%;
            border-color: aqua;
            border-style: inherit;
        }
         
        button:hover {
            background-color: green;
        }
    

 

    
 
    
    
    Add item
    
    Remove item
 
    
        function addItem() {
            var a = document.getElementById("list");
            var candidate = document.getElementById("candidate");
            var li = document.createElement("li");
            li.setAttribute('id', candidate.value);
            li.appendChild(document.createTextNode(candidate.value));
            a.appendChild(li);
        }
 
        // Creating a function to remove item from list
        function removeItem() {
 
            // Declaring a variable to get select element
            var a = document.getElementById("list");
            var candidate = document.getElementById("candidate");
            var item = document.getElementById(candidate.value);
            a.removeChild(item);
        }
    

 

输出：现在，单击添加项目将任何项目添加到列表中。单击删除项目以从列表中删除任何项目。