Search code examples
javascriptjqueryhtmlhyperlinkremovechild

How to remove some part of HTML

My code:

<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>

How can I remove everything after div with id div1 but keep the hyperlink when click the button which finally look like this:

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

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

  • You can use nextAll() method along with :not and :last-child selector:

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

    Working Demo