This method involves a combination of JavaScript techniques.
Instructions
1. Identify all HTML nodes on the page.
2. Locate nodes with the class name 'productPage'.
3. Once the class is found, hide the following nodes by adding the hidden class to them.
By following these steps, all nodes belonging to a specific class will be removed from the DOM structure, regardless of their position in the hierarchy.
$(document).ready(function() {
$('button').click(function() {
const allNodes = $('*'); // Get 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 Remain Visible</div>
<div class="productPage">Product Page</div>
<div>will be hidden</div>
</div>
</div>
<div>This content will not be hidden.</div>
<button>Click Me</button>
I trust this meets your requirements.