javascript - 如何删除 HTML 的某些部分

Question

我的代码：

<div id="main">
    <div id="div1">Keep this div</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <p>4</p>  
    <a href="">Keep this hyperlink</a>
</div>

<button id="button">Clear</button>

如何删除 id 为 div1 的 div 之后的所有内容，但在单击最终如下所示的按钮时保留超链接：

<div id="main">
    <div id="div1">Keep this div</div>
    <a href="">Keep this hyperlink</a>
</div>

<button id="button">Clear</button> 

Answer 1

我假设您使用的是 jQuery，所以 anextAll(':not(a)')应该可以正常工作。

工作演示。

Answer 2

您可以将nextAll()方法与:not和:last-child选择器一起使用：

$("#button").click(function() {
    $("#div1").nextAll(':not(:last-child)').remove();
});

工作演示