CODEWITHSUNDEEP
javascriptjquerycss
hkrlys
hkrlys

Reputation: 441

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.

Upvotes: 0

Views: 73

Answers (3)

Nitheesh
Nitheesh

Reputation: 19986

This is a JavaScript mixed approach.

Steps

1. Select all html nodes.
2. Search the nodes for the class name 'productPage'
3. If the class name is found, from the next node onward start adding the hidden class.

By doing the above procedure, the complete node list which are under a particular class name will be vanished from the DOM. No matter whats the hierarchy of the DOM is

$(document).ready(function() {
  $('button').click(function() {
    const allNodes = $('*'); // Select all HTML nodes
    let itemIndex = null;
    allNodes.map((index, node) => {
      node.className &&
      node.className.indexOf('productPage') > -1 &&
      itemIndex === null
        ? (itemIndex = index)
        : itemIndex !== null
        ? (node.className += ' hidden')
        : null;
    });
  });
});
.hidden {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div>
  <div>
    <div>Will Stay</div>
    <div class="productPage">Product Page</div>
    <div>is hidden</div>
  </div>
</div>
<div>not hidden..</div>
<button>button</button>

I hope this is what you are looking for.

Upvotes: 1

Shiny
Shiny

Reputation: 5055

You can use the Next Siblings Selector ~ for this

This will select all elements following .productPage that have the same parent, and also match the div selector

$(".productPage ~ div").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>

Upvotes: 1

doğukan
doğukan

Reputation: 27389

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>

Upvotes: 3

Related Questions