按类删除后续的重复元素

Question

通过javascript或jquery,我需要删除集合中的重复元素,以便保留一个.它们都是一样的,所以只要剩下哪一个就被移除并不重要.页面显示如下:

<div class="column-hr"></div>
<div class="column-hr"></div>
<div class="column-dude"></div>
<div class="column-hr"></div>
<div class="column-hr"></div>
<div class="column-dude"></div>
<div class="column-hr"></div>

其中<div class="column-hr"></div>每一个之前<div class="column-dude"></div>需要保持,但每花花公子列之前,以后每HR柱需要去.

我尝试了以下内容,希望它会这么简单.没工作.

$( "div.column-hr" ).each(function( index ) {
    if ($(this).next('div.column.hr')) {
        $(this).remove();
    }
});

Answer 1

您可以使用兄弟选择器 实现此目的+.非常简单,也是最快的解决方案,因为浏览器的CSS引擎将用于选择元素:

$(".column-hr + .column-hr").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column-hr">hr</div>
<div class="column-hr">hr</div>
<div class="column-dude">dude</div>
<div class="column-hr">hr</div>
<div class="column-hr">hr</div>
<div class="column-dude">dude</div>
<div class="column-hr">hr</div>

工作原理:CSS选择器.column-hr + .column-hr选择.column-hr具有直接上一个兄弟的元素.column-hr.结果,这个表达式将选择除第一个之外的所有相邻.column-hr元素,因为第一个元素在它之前没有另一个元素..column-hr