js删除ul中指定的li
在JavaScript中，删除<ul>元素中的指定<li>可以通过多种方法实现。以下是几种常见的方法及其示例代码：
方法一：使用removeChild()
这种方法通过选择父元素<ul>，然后找到要删除的<li>子元素，最后调用removeChild()方法来删除它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除指定的li</title>
</head>
<body>
<ul id="myList">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<button onclick="deleteListItem('项目2')">删除项目2</button>
<script>
function deleteListItem(itemText) {
const ul = document.getElementById('myList');
const liItems = ul.getElementsByTagName('li');
for (let i = 0; i < liItems.length; i++) {
if (liItems[i].textContent === itemText) {
ul.removeChild(liItems[i]);
break; // 找到并删除后退出循环
}
}
}
</script>
</body>
</html>方法二：使用querySelector和remove()
这种方法利用现代浏览器支持的querySelector方法来选择要删除的<li>元素，然后调用remove()方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除指定的li</title>
</head>
<body>
<ul id="myList">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<button onclick="deleteListItem('项目2')">删除项目2</button>
<script>
function deleteListItem(itemText) {
const li = document.querySelector(`#myList li:nth-child(${Array.from(document.querySelectorAll('#myList li')).findIndex(li => li.textContent === itemText) + 1})`);
if (li) {
li.remove();
}
}
</script>
</body>
</html>方法三：使用事件委托和数据属性
如果<li>元素是动态生成的，或者列表很长，可以使用事件委托和数据属性来提高效率。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除指定的li</title>
</head>
<body>
<ul id="myList">
<li data-id="1">项目1 <button class="delete-btn">删除</button></li>
<li data-id="2">项目2 <button class="delete-btn">删除</button></li>
<li data-id="3">项目3 <button class="delete-btn">删除</button></li>
</ul>
<script>
document.getElementById('myList').addEventListener('click', function(event) {
if (event.target.classList.contains('delete-btn')) {
const li = event.target.closest('li');
if (li) {
li.remove();
}
}
});
</script>
</body>
</html>注意事项
- 选择器的准确性：确保选择器能够准确地选中要删除的
<li>元素，避免误删。 - 性能考虑：对于大型列表，频繁操作DOM可能会影响性能，可以考虑使用文档片段或者虚拟DOM技术来优化。
- 兼容性：
remove()方法是现代浏览器支持的，如果需要兼容旧版本浏览器，可以使用removeChild()方法。
以上方法可以根据具体需求选择使用，希望对你有所帮助。
相关·内容
47秒
js中的睡眠排序
15.5K20
17分58秒
15-尚硅谷-Javascript-实战-删除指定行-控制键盘的输入
390
7分9秒
MySQL教程-47-删除表中的数据
30
5分16秒
【剑指Offer】18.2 删除链表中重复的结点
7.5K5
10分49秒
11.尚硅谷_JS高级_函数中的this.avi
3670
13分58秒
day28_反射/26-尚硅谷-Java语言高级-调用运行时类中的指定属性
360
12分59秒
day28_反射/27-尚硅谷-Java语言高级-调用运行时类中的指定方法
340
13分58秒
day28_反射/26-尚硅谷-Java语言高级-调用运行时类中的指定属性
400
12分59秒
day28_反射/27-尚硅谷-Java语言高级-调用运行时类中的指定方法
370
13分58秒
day28_反射/26-尚硅谷-Java语言高级-调用运行时类中的指定属性
310
12分59秒
day28_反射/27-尚硅谷-Java语言高级-调用运行时类中的指定方法
340
6分37秒
day28_反射/28-尚硅谷-Java语言高级-调用运行时类中的指定构造器
390
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
