从父元素中移除子元素

Question

我的Html：

<html>
<head>
    <title>Web Test</title>
    <meta charset="utf-8" />
    <link href="my.css" rel="stylesheet" as="style" media="all">
</head>
<body>
    <header>
        <div class="navbar">
            <a href="#">LINK</a>
        </div>
    </header>
    <main>
        <div class="adv">
            <a href="#">LINK</a>
        </div>
        <div class="content">
            Web Test...!
        </div>
    </main>
    <footer>
        <a href="#">LINK</a>
    </footer>
    <script>
        $(".content head").remove();
        ...
    </script>
</body>
</html>

我的 JavaScript：

<script>
    $("head").remove();
    $('header').remove();
    $('footer').remove();
    $('div.adv').remove();
    $('script').remove();
</script>

必须删除以下所有元素：“html”、“head”、“title”、“meta”、“body”、“header”、“footer”、“main”、“script”和“div.adv” .

只有以下元素不应被删除：“div.content”

出去：

<div class="content">
    Web Test...!
</div>

Answer 1

在普通 JavaScript 中使用Element.remove() ：

const ELS_toRemove = document.querySelectorAll('header, footer');  
ELS_toRemove.forEach(EL => EL.remove());

或针对您的选择器进行具体说明：

"body > header, body > footer"

如果你想重新附加一个元素（ .content ），同时删除其他元素的内容，也可以使用Element.append() 。 与.outerHTML相反，它将保留移动元素的所有当前数据和事件。

 const EL_content = document.querySelector(".content"); const ELS_toRemove = document.querySelectorAll("body > *"); // Remove desired elements: ELS_toRemove.forEach(EL => EL.remove()); // Add back.content //.append() will preserve all current data and Events on that element document.querySelector("body").append(EL_content);

 <html> <head> <title>Web Test</title> <meta charset="utf-8" /> <link href="my.css" rel="stylesheet" as="style" media="all"> </head> <body> <header> <div class="navbar"> <a href="#">LINK</a> </div> </header> <main> <div class="adv"> <a href="#">LINK</a> </div> <div class="content"> Web Test...! </div> </main> <footer> <a href="#">LINK</a> </footer> </body> </html>

Answer 2

您应该将JQuery添加到head上的 HTML 代码中。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

不要忘记将您的代码放在 JQuery 导入下方：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
    $("head").remove();
    $('header').remove();
    $('footer').remove();
    $('div.adv').remove();
    $('script').remove();
});
</script>

从父元素中移除子元素

问题描述

2 个解决方案

解决方案1
0 2021-08-29 10:29:36

解决方案2
0 2021-08-29 10:30:43

从父元素中移除子元素

问题描述

2 个解决方案

解决方案1 0 2021-08-29 10:29:36

解决方案2 0 2021-08-29 10:30:43

解决方案1
0 2021-08-29 10:29:36

解决方案2
0 2021-08-29 10:30:43