按 class 删除后续重复元素

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-dude"></div> 之前的一个 <div class="column-hr"></div> 需要保留，但每个花花公子专栏之前的每个后续 hr 专栏都需要删除。

我尝试了以下方法，希望能这么简单。没用。

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

Answer 1

您可以使用 sibling selector + 来实现。非常简单也是最快的解决方案，因为浏览器的 CSS 引擎将用于 select 元素：

$(".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 select 或 .column-hr + .column-hr selects .column-hr 具有直接上一个兄弟 .column-hr 的元素。结果这个表达式将 select all 相邻 .column-hr 个元素 except 第一个，因为第一个没有在它之前还有另一个 .column-hr。

Answer 2

你可以试试这个：

$( ".column-hr" ).each(function() {
    console.log($(this).html());
    console.log($(this).next().attr('class'));

    if ($(this).next().attr('class') == 'column-hr') {
        $(this).remove();
    }

});

https://jsfiddle.net/aodnw5ns/

Answer 3

var classesToRemove = ['column-hr', 'column-dude'];
var $elements;

for (var i = 0, l = classesToRemove.length; i < l; i++) {
  // Find elements
  $elements = $('.' + classesToRemove[i]);

  var elementsLength = $elements.length;

  // If there is more than one element
  if (elementsLength > 1) {
    // get all elements except the first
    $elements = $elements.slice(1, elementsLength);
    // remove them
    $elements.remove();
  }
}

// prevent memory leaks
$elements = null;

JSFiddle

按 class 删除后续重复元素

Remove subsequent duplicate elements by class

javascript

each

jquery