如何在某个div之后删除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 looks like this:

<div class="right-panel">
  <div class="info">Text</div>
  <form id="the-form">
    <input type="hidden" name="first-name" value="">
    <input type="hidden" name="last-name" value="">
    <input type="hidden" name="state" value="">
  </form>
  <script>javaScript</script>
  <div id="dynamic-id-1">Advertisement 1</div>
  <div id="dynamic-id-2">Advertisement 2</div>
</div>

I'd like to ensure that the "dynamic-id-1" and "dynamic-id-2" divs are always removed or hidden no matter what their ID's are (their IDs are subject to change). How do I target these elements without targeting their IDs?

Edit--I tried this, but my approach seems limited, and I couldn't get it to work with multiple divs, even when chaining:

$('#the-form').next().hide();

(Note: unfortunately they don't have a class, there are multiple divs, and the IDs are always completely different. I was hoping there might be novel way to target the last two divs of the wrapping div and hide them)

Answer 1

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 2

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 3

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();

Answer 4

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 5

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();