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

Answer 1

思路：读取所有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 点击“剔除”按钮之后效果

Answer 2

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>