How to remove elements after an element in JavaScript [duplicate]

Question

In my current project i am getting xhr requests and i am placing them after an element like with this: el.insertAdjacentHTML('afterend', "foo bar"); but i haven't found a way to remove everything after the given element, otherwise the markup will fill over.

I could wrap another container around it, but i am trying to use as less dom elements as possible for performance reasons.

I found several solutions with JQuery, this is not an option either, because its too huge.

Let's say i have a nav element which is on top one its parent container and i want to place stuff after it, but before i have to remove the stuff which exists before.

Any ideas? Thanks in advance

searched the web and here, just found jq solutions, no vanilla js.

JS

    el = document.querySelector("nav.mainNav");
    el.insertAdjacentHTML('afterend', "foo bar");

HTML

    <div>
    <nav></nav>
    <nav></nav>
    <nav class="mainNav"></nav>
    {...CONTENTSHOULD BE PLACED HERE, PLACING WORKS, REMOVING NOT...}
    </div>

JSII - I am experimenting with something like this, but it seems that it does not select all elements. Suggestions?

    var el = document.querySelectorAll("html > body > 
    nav.mainNav + *");

            for ( var i = 0; i < el.length; i++ ){
                el[i].remove();
            }

I found my own solution, thanks four assistance!

var el = document.querySelectorAll("html > body > *:nth-child(1n+3)");
for ( var i = 0; i < el.length; i++ ){
    el[i].remove();
}

Why not place a div after mainNav and change the contents of that? — Manav
– Manav, Commented Jul 2, 2019 at 12:32
One element more or less in the DOM is not going to have any measurable effect on performance. But if you are hellbent on finding a solution based on that kind of bogus reasoning, well then go locate the following siblings of your .mainNav element, and remove them one by one (should there be more than one.) — 04FS
– 04FS, Commented Jul 2, 2019 at 12:34
i want to keep the markup small, i am beginning from scratch and mobile pages tend to get slow with a huge dom, so i start adding those wisely. I can add simple and easy with insertAdjacentHTML, but i want to remove the old stuff there before. ;) — Sascha Grindau
– Sascha Grindau, Commented Jul 2, 2019 at 12:39

Manav · Accepted Answer · 2019-07-02 12:38:10Z

4

An approach to this would be

el = document.querySelector("nav.mainNav");

var insertedContent = document.querySelector(".insertedContent");
if(insertedContent) {
    insertedContent.parentNode.removeChild(insertedContent);
}
el.insertAdjacentHTML('afterend', "<span class ='insertedContent'>foo bar</span>");

Simply place the content within an element, and remove that element when you wish to replace, if it exists!

answered Jul 2, 2019 at 12:38

Manav

1,36710 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Manav Over a year ago

Alternately, instead of removing the container element, you could simply change its content

Sascha Grindau Over a year ago

thank you, but thats rather hacky. and adds complexity. Isnt there any easy stuff like in JQuery? .remove()?

Manav Over a year ago

@SaschaGrindau that's the best vanilla js can afford :)

Sascha Grindau Over a year ago

okay thanks, i might go for another container then or use yours. Let's see, where these goes.

Sascha Grindau Over a year ago

found my own solution and added it above.

Collectives™ on Stack Overflow

How to remove elements after an element in JavaScript [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related