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>，但每个dude列之前的每个后续hr列都需要去。

我尝试了以下内容，希望它会如此简单。没用。

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

Answer 1

您可以使用sibling selector +来实现此目的。非常简单，也是最快的解决方案，因为浏览器的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的{{1}}个元素。结果，此表达式将选择所有相邻的.column-hr元素，除了第一个，因为第一个没有另一个.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

按类删除后续的重复元素

3 个答案: