jquery - remove duplicate consecutive element

Question

<div>something i need</div>

<span>x</span>

<div>something i need</div>

<span>x</span>

<div>something i need</div>

<span>x</span><span>x</span><span>x</span>

<div>something i need</div>

On the row where I have 3 span elements, how do I remove all but one? I only want to have one between each element.

edit: made the html correct so people focus on the actual issue.

I changed them to spans because of the first comment. I didn't really write correct html at first, didn't think anyone would point that out considering my issue is not in any way related. — , May 10 '13 at 09:12
Have a look at http://stackoverflow.com/questions/2822962/jquery-remove-duplicate-elements — Aamir Afridi, May 10 '13 at 09:15

score 1 · Accepted Answer · answered May 10 '13 at 09:14

1

$('span').each(function() {
    while($(this).prop('tagName') == $(this).next().prop('tagName'))
        $(this).next().remove();
});

As you can see, consecutive spans have been removed, and there is only one x in-between the divs instead of three: http://jsfiddle.net/samliew/KFMrU/

It would be a good practice to wrap the above elements in a container, and only perform the removal in that container. i.e.:

$('#myDiv span').each(function() {

answered May 10 '13 at 09:14

Samuel Liew

76,741
107
159
260

Thanks! I added classes to the spans themselves. Works like a charm! – May 10 '13 at 09:32

score 0 · Answer 2 · answered May 10 '13 at 09:15

0

Here you have fiddle: http://jsfiddle.net/SbpzY/

$('div').each( function() {
    if(!$(this).prev().hasClass('a'))
        $(this).remove();
});

will work with following html:

<span class="a">something i need</span>

<div>x</div>

<span class="a">something i need</span>

<div>x</div>

<span class="a">something i need</span>

<div>x</div><div>x</div><div>x</div>

<span class="a">something i need</span>

answered May 10 '13 at 09:15

Kasyx

3,170
21
32

Oh dear i started working on it while there was `li` in structure, so i have to create my own. – Kasyx May 10 '13 at 09:17

score 0 · Answer 3 · answered Sep 02 '19 at 14:57

Regular Expression

Assuming the HTML elements are directly in the <body> then regular expression back-references can also remove the consecutive duplicates, here facilitated by jQuery:

const jqContainer = jQuery("body");
jqContainer
    .html(
        jqContainer
            .html()
            .replace(/(<span>[^<>]+<\/span>)+/g, "$1")
    )
;

NOTE: The regular expression in this case matches all consecutive duplicate <span> elements containing text regardless of what that text is. If you wanted to match <span> with specific text within then replace [^<>]+ with the text to be replaced, e.g. x

CSS

The following may not be applicable in this context, but if the goal is to remove the consecutive duplicate elements for presentation purposes, and if CSS is applicable, then the following CSS will stop the consecutive duplicate spans from being displayed:

span + span {
    display: none;
}

jquery - remove duplicate consecutive element

3 Answers3

Regular Expression

CSS