删除ul 标签下文本相同的li元素 如何用JQUERY实现

发布网友 发布时间：2022-04-23 09:49

我来回答

共3个回答

懂视网 时间：2022-04-23 14:10

本文主要介绍了jQuery实现动态删除LI的方法,结合实例形式分析了jQuery针对页面元素动态操作相关实现技巧,需要的朋友可以参考下，希望能帮助到大家。

我们有时候知道UL的id，但是苦不堪言的找不到LI进行清除，这边有一些办法可以参考，设置Li的id是不错的方法，但是千万别设置成一个ID，到时候删除只会删除第一个

可以使用

这个方式可以删除不是第一个li的其他所有li.

我这边是用：

方法很多，还可以用：

1、用not

或

2、用filter

$("ul>li").filter(function(index){
return index!=0;
}).remove();

热心网友 时间：2022-04-23 11:18

思路：读取所有li元素的文本→剔除重复值→删除所有li元素→生成非重复的li元素。核心代码如下：

// 获取所有li元素
li = $("li").map(function() {
  return $(this).html();
}).get();
// 剔除重复值
$.unique(li);
// 删除之前的li元素
$("li").remove();
// 创建无重复的li元素
$.each(li, function(index, val) {
  $("ul").append('<li>'+val+'</li')
});

实例演示如下：

1、创建Html元素

<div class="box">
<span>实例演示：点击按钮剔除重复的列表项目</span><br>
<div class="content">
<ul>
<li>刘备</li>
<li>关羽</li>
<li>刘备</li>
<li>张飞</li>
<li>关羽</li>
<li>刘备</li>
</ul>
    <input type='button' value='剔除' />
</div>
</div>

2、设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box>span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
li{margin:5px;list-style: none;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}

3、编写jquery代码

$(function(){
$("input[type='button']").click(function() {
li = $(".content li").map(function() {
return $(this).html();
}).get();
$.unique(li);
$(".content li").remove();
$.each(li, function(index, val) {
$(".content ul").append('<li>'+val+'</li')
});
});
});

4、观察效果

4.1 初始状态

4.2 点击“剔除”按钮之后效果

热心网友 时间：2022-04-23 12:36

var temp = '';
$(function(){
$('ul>li').each(function(){
if(temp.indexOf($(this).html())!=-1)
$(this).remove();
temp += $(this).html();
})
})
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>2</li>
<li>4</li>
<li>3</li>
</ul>