How to remove all elements in a div after a certain div

Question

So I have a div that is drawing in dynamic elements at its bottom and I want to hide these elements, no matter what their IDs are using javaScript/jQuery. Basically my HTML

Answer 1

Target the class instead of the dynamic ID.

<div class="element-to-remove" id="dynamic-id-1" />
<div class="element-to-remove" id="dynamic-id-2" />

$('.right-panel . element-to-remove').remove();

Answer 2

If the script tag is always before the div's that need removing you could do this -

$('.right-panel > script').nextAll('div').remove();

http://jsfiddle.net/w6d8K/1/

Based on what you tried you could do this -

$('#the-form').nextAll('div').hide();

http://jsfiddle.net/w6d8K/2/

Here are the docs for nextAll() - https://api.jquery.com/nextAll/

Answer 3

You are saying you don't want to target their "id", but is there some specific part in the id that will remain the same ?

like for instance "dynamic-id-" ?

If this is the case you can target them by using a "like selector". The code below would target all divs whose ID is starting with "dynamic-id"

$('div[id^=dynamic-id]').each(function () {
  //do something here
});

Answer 4

The simplest route would be to add classes to the dynamic elements. Something like:

<div class="removable-element" id="dynamic-id-1">Advertisement 1</div>

Then, you can do something like:

$(".right-panel .removable-element").remove()

Answer 5

If only one div at a time is generated dynamically. Add this to dynamic generation:

$('#the-form + div').hide();

Another method to achieve the same (not preferred) is:

$('#the-form').next('div').remove();