如何在JavaScript中删除元素之后的元素[重复]

Posted 2023-02-21

【中文标题】如何在JavaScript中删除元素之后的元素[重复]

【英文标题】：How to remove elements after an element in JavaScript [duplicate]

【发布时间】：2019-11-13 02:32:06

【问题描述】：

在我当前的项目中，我收到了 xhr 请求，我将它们放在像这样的元素之后：el.insertAdjacenthtml('afterend', "foo bar"); 但我还没有找到在给定element 之后删除所有内容的方法，否则标记将被填满。

我可以在它周围包裹另一个容器，但出于性能原因，我尝试使用尽可能少的 dom 元素。

我用JQuery 找到了几个解决方案，这也不是一个选项，因为它太大了。

假设我有一个 nav 元素，它位于其父容器的顶部，我想在它之后放置东西，但在我必须删除之前存在的东西之前。

有什么想法吗？ 提前致谢

在网上搜索，在这里，刚刚找到 jq 解决方案，没有 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 - 我正在尝试这样的东西，但它似乎并没有选择所有元素。有什么建议吗？

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

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

我找到了自己的解决方案，感谢四位帮助！

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

【问题讨论】：

为什么不在mainNav 之后放置一个 div 并更改其内容？

DOM 中或多或少的一个元素不会对性能产生任何可衡量的影响。但是，如果您一心想要基于这种虚假推理找到解决方案，那么请找到您的 .mainNav 元素的以下兄弟姐妹，并将它们一一删除（应该不止一个。）

嗯，我该如何选择它们？

我想让标记保持小，我从头开始，移动页面往往会因 dom 变慢而变慢，所以我开始明智地添加这些标记。我可以使用 insertAdjacentHTML 添加简单易行的内容，但我想删除之前的旧内容。 ;)

@SaschaGrindau 我下面的回答应该适合你

【参考方案1】：

解决这个问题的方法是

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>");

只需将内容放置在一个元素中，并在您希望替换时删除该元素（如果存在）！

【讨论】：

或者，您可以简单地更改其内容，而不是删除容器元素

谢谢你，但那太老套了。并增加了复杂性。没有像 JQuery 这样简单的东西吗？ .remove()?

@SaschaGrindau 那是 js 能买得起的最好的 :)

好的，谢谢，我可能会去另一个容器或者使用你的。让我们看看，这些都去哪儿了。

找到我自己的解决方案并添加到上面。