Question

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

<ul id = "ID1">
<li>111</li>
<li>222</li>
.............
</ul>

<li>是使用js代码添加的,现在想实现的功能是,当<li>个数超过10个时,自动删除第一个<li>元素

Answer 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方法用于移除子元素，参数为需要移除的元素

Answer 2

var ul = document.querySelector("#ID1");
var lis = ul.querySelectorAll("li");
if(lis.length > 10) {
    lis[0].remove();
}

Answer 3

var obj = $("#id1").children("li");
if(obj.length > 10){
$("#id1").removeNode(0);
}
这样可以吗？