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

在 HTML 中，开发人员可以使用“ul”标签来创建项目列表。我们可以将所有相关项目添加到单个列表中。我们还可以使用 JavaScript 来管理列表项。

有时，开发人员需要使用 JavaScript 添加或删除列表项。我们可以使用特定的属性值访问列表项，并使用removechild()方法删除列表项。

在本教程中，我们将从用户那里获取输入，并根据值删除列表项。

语法

用户可以按照以下语法使用javaScript删除添加的列表项

立即学习“Java免费学习笔记（深入）”；

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

在上面的语法中，我们使用 id 访问列表项。之后，我们使用removechild()方法从列表中删除选定的列表项。

示例1（从列表中删除动态元素）

在下面的示例中，我们创建了 id 等于“汽车”的列表。此外，我们还创建了输入框来从用户那里获取列表项的值。此外，我们还创建了添加汽车和删除汽车按钮，当用户单击相应按钮时，该按钮会调用 addCar() 和 removeCar() 函数。

在 JavaScript 中，我们访问列表和文本输入值。在addCar()函数中，我们首先创建列表项，然后设置列表项的id。接下来，我们创建一个文本节点，将其附加到列表项，然后使用appendchild()方法将列表项附加到列表。

    
 Removing the  dynamic list items  from the list using JavaScript
    

    
    
     Add car 
     Remove car 
    

示例 2（从列表中删除最后一个元素）

在下面的示例中，我们使用 JavaScript 从列表中删除最后一个列表项。此示例与第一个示例非常相似，但不同之处在于我们删除了本示例中的最后一个列表项以及第一个示例中的动态列表项。

网奇IOS智能在线订单系统

产品简介： 网奇IOS智能订单系统，是网奇公司研发的一款智能在线订单编辑以及管理系统。本系统适合使用在；在线报名、酒店预定、信息反馈、在线订单和在线投诉等等诸多应用上。本系统所有选项字段完全通过后台控制，在线报名系统可以变为在线预定系统，同时可以变为任何其它的系统，里面的栏目字段，可以任意添加、删除、 修改。本系统为网奇公司全国独家首创，顺应网络需求，安装十分便利，上传即可使用。产品特色：

下载

在removeCar()函数中，我们使用‘lastElementChild’属性来获取列表的最后一个子元素。之后，我们删除最后一个元素（如果存在）。

在输出中，用户可以将多个项目添加到列表中，然后单击删除按钮来删除列表元素。

    
 Removing the  last list item  from the list using JavaScript 
    

    
    
     Add car 
     Remove last car 
    

示例 3

在下面的示例中，我们使用 JavaScript 删除所有列表项。在这里，我们创建了项目列表。

在 JavaScript 中，我们定义了 addItem() 函数来添加项目，并定义了clearAll() 函数来从列表中删除所有项目。在clearAll()函数中，我们使用“firstchild”属性来获取列表的第一个子级，并使用removechild()方法来删除该子级。我们使用 while 循环进行迭代，直到删除列表的所有子项。

在输出中，用户可以按全部清除按钮从列表中删除所有项目。

   
 Removing the  all last list items  from the list using JavaScript
   

   
   
    Add itmes 
    clear list 
   

结论

用户学会了从列表中删除动态项目。基本方法是每个列表项都应该有一个唯一的标识符来访问和删除动态列表项并将其删除。在这里，我们使用列表项值作为标识符本身的 id。

在第二个示例中，我们仅从列表中删除最后一个子元素；在第三个示例中，我们一起删除所有列表项。