remove all next divs after a child

I have something like this :

<div>
     <div class="productPage"></div>       
     <div>is hidden</div>  // ***this content will be hidden
</div>

// *** this one will not become hidden.
<div>not hidden..</div>

using this:

   $( ".productPage").nextAll().addClass( "hidden" );

This will hide only the content i marked on the code, means only childs of the same parent. I need to hide every single thing after productPage.

Answer

You should also go to parent and target the next divs.

$(".productPage").nextAll().addClass("hidden");
$(".productPage").parents("div").eq(0).nextAll().addClass("hidden");

.hidden {
  display:none;
}

<div>
  <div class="productPage"></div>
  <div>is hidden</div> <!-- this content will be hidden  -->
</div>

<!-- this one will not become hidden. -->
<div>not hidden..</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Advertisement

Answer