如何使用js 删除<ul>下第一个<li>

JavaScript021

如何使用js 删除<ul>下第一个<li>,第1张

使用原生的js实现删除ul下的第一个li代码如下:

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul> document.getElementsByTagName('ul')[0].removeChild(document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0])

解释:

document.getElementsByTagName根据标签获取元素,取得的是一个数组,包含所有指定标签的集合,其中document.getElementsByTagName('ul')[0]表示页面上的第1个ul标签(数组下标从0开始)

removeChild方法用于移除子元素,参数为需要移除的元素

使用jquery库的函数:remove()。

功能思路:展现一个UL,然后设计一个按钮,通过绑定删除函数,点击时删除所有LI节点。

实例演示如下:

1、设计简单的一个页面,其中html代码如下:

简单的样式文件:

此时的页面内容展示如下:

2、设计JS代码,实现删除函数。

3、实例操作,点击按钮,实现节点删除,展示如下:

完成设计,此时的DOM节点如下:

扩展资料:

remove函数详情解析:

1、定义和用法:

remove() 方法移除被选元素,包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

2、语法:

$(selector).remove()。

<ul><li id="${id}" onclick="remove(${id})"></li><ul>

function remove(id){

//进行操作,完了删除节点

$("#"+id).remove()

}