Question 209612 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Remove all elements inside parent element until child element with certain class?

Assume I have a simplified HTML like:

<div id="foobar">
  <div id="some-div">...</div>
  <div>...</div>
  <div id="another-div">...</div>
  <div id="keepthis"></div>
  .
  .
  .
</div>

Now I want to remove all elements inside <div id="foobar"> starting from first child until <div id="keepthis"> is reached (which should be kept). In the sample above there are 3 children to remove. In other scenarios it could be 1, 2, 5 or even 0 children.

How can I achieve this with jQuery or JavaScript?

Tags:

6

Answers


  1. 0

    Done. If you have any question feel free to ask.

    // getting all the children
var allChild = document.querySelector('#foobar').children;

// hiding all the children before keepthis
for(i=0; i < allChild.length; i++){
  if(allChild[i].getAttribute('id') === 'keepthis'){
    break;
  }
  allChild[i].style.display = 'none';
}
    <div id="foobar" ....>
  <div id="23452352">...</div>
  <div>....</div>
  <div id="siugfsiuhg">....</div>
  <div id="keepthis" ....>keepthis</div>
      .....
  <div>after keep this 1</div>
  <div>after keep this 2</div>
</div>
    Login or Signup to reply.
  2. 0

    You can use JQuery’s remove function, then a css :not selector:

    $('#foobar div').remove(':not(#keepthis)')

    Here’s what I did:

    1. Used the Jquery selector to select all the divs under #foobar.
    2. From that list of divs, I used remove to remove everything except #keepthis
    Login or Signup to reply.
  3. 0

    Simply:

    $("#foobar #keepthis").prevAll().remove();
    Login or Signup to reply.
  4. 0

    In pure JavaScript you could use querySelectorAll() with a CSS selector like *:has(~ #keepthis) to get the previous all of an element of ID #keepthis — which uses a combination of the CSS3 :has() selector and the well known subsequent-sibling combinator ~, and remove an Element using the Element.remove() method.

    document.querySelectorAll("*:has(~ #keepthis)").forEach(el => el.remove());
    <div id="foobar">
  <div>remove</div>
  <div>remove</div>
  <div>remove</div>
  <div id="keepthis">keepthis</div>
  <div>keep</div>
  <div>keep</div>
</div>

    In jQuery it would look like:

    $("*:has(~ #keepthis)").remove();
    <div id="foobar">
  <div>remove</div>
  <div>remove</div>
  <div>remove</div>
  <div id="keepthis">keepthis</div>
  <div>keep</div>
  <div>keep</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

    :has() being a CSS3 addition, the syntax method you can use is the supported jQuery’s .prevAll() making it cleaner and self-explanatory:

    $("#keepthis").prevAll().remove();
    <div id="foobar">
  <div>remove</div>
  <div>remove</div>
  <div>remove</div>
  <div id="keepthis">keepthis</div>
  <div>keep</div>
  <div>keep</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

    that jQuery’s .prevAll() method could be rewritten in vanilla JavaScript like:

    const prevAll = (el, prev=[]) => {
  while (el = el.previousElementSibling) prev.push(el);
  return prev;
};

prevAll(document.querySelector("#keepthis")).forEach(el => el.remove());
    <div id="foobar">
  <div>remove</div>
  <div>remove</div>
  <div>remove</div>
  <div id="keepthis">keepthis</div>
  <div>keep</div>
  <div>keep</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    Login or Signup to reply.
  5. 0

    Assuming the "until" element (#keepthis in your case) might not always exist, and you still want everything (before it) to be removed.

    "Salman A"‘s (great) answer wouldn’t if #keepthis element is not found:
    $("#foobar #keepthis").prevAll().remove();

    The below example is highly simplified:

    Find the first child and continue until u element, and remove everything found:

    $(document.body).children().first().nextUntil('u').remove();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a>1</a>
<b>2</b>
<u>3</u>
<a>4</a>
    Login or Signup to reply.
  6. 0

    To remove elements coming earlier to the desired div use .prevAll()

    $("#foobar #keepthis").prevAll().remove();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foobar">
  <div id="some-div">...</div>
  <div>...</div>
  <div id="another-div">...</div>
  <div id="keepthis">I am safe</div>
  <div >We</div>
  <div >are</div>
  <div >safe</div>
  <div >too</div>
</div>

    To remove elements coming after the desired div use .nextAll()

    $("#foobar #keepthis").nextAll().remove();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foobar">
  <div id="some-div">We are</div>
  <div>safe</div>
  <div id="another-div">Now</div>
  <div id="keepthis">I am safe too</div>
  <div >...</div>
  <div >...</div>
  <div >...</div>
  <div >...</div>
</div>

    To remove elements coming earlier/after the desired div

    $("#foobar").children().not('#keepthis').remove();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foobar">
  <div id="some-div">We are</div>
  <div>safe</div>
  <div id="another-div">Now</div>
  <div id="keepthis">I am safe only</div>
  <div >...</div>
  <div >...</div>
  <div >...</div>
  <div >...</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search