Is there a better way to get the specific element by their class name to modify the elements?

Question

I am trying to select a specific element so that I can delete or change the content of the element.

For example, if this is the code I have

<div class="container">
  <div class="box">
    <div class = "a"> OPTION 12 </div>
<div class="container">
  <div class="box">
    <div class = "b"> OPTION 78 </div>
</div>
<div class="container">
  <div class="box">
    <div class = "c"> OPTION 56 </div>
</div>
<div class="container">
  <div class="box">
    <div class = "d"> OPTION 90 </div>
</div>

If the order of the box gets rendered randomly when loading up a page, and I want to select a div that has OPTION 56 and delete the whole node that contains that content, what is the best way to approach this WHEN they render in the webpages randomly?

I know you can remove the childNodes with getElementsByClassName and their indices. Is there a specific way to access the node/element without using the getElementsByClassName method?

I've tried adding an id for all each of the div classes.

I want to select a parent div that contains the content OPTION 56 and delete the whole

<div class="container">
  <div class="box">
    <div class = "c"> OPTION 56 </div>
</div>

Parent node.

Thanks in advance.

Answer 1

You can always put the value of the div into a data attribute.

<div class="container">
    <div class="box">
        <div class="a" data-option="OPTION 12">OPTION 12</div>
    </div>
    <div class="box">
        <div class="c" data-option="OPTION 56">OPTION 56</div>
    </div>
</div>

And your javascript (or jquery, as using below) would involve

$('[data-option="OPTION 56"]').parent('.box').remove();   

Answer 2

Assuming you do not know the class name beforehand and only know the innerText value you want to remove, you can do this to remove the element:

 const removeMe = "OPTION 56"; const e = document.querySelectorAll('.container .box div'); e.forEach(e => (e.innerText === removeMe && e.remove()));

 <div class="container"> <div class="box"> <div class="a"> OPTION 12 </div> <div class="container"> <div class="box"> <div class="b"> OPTION 78 </div> </div> <div class="container"> <div class="box"> <div class="c"> OPTION 56 </div> </div> <div class="container"> <div class="box"> <div class="d"> OPTION 90 </div> </div> </div> </div> </div> </div> </div>

Answer 3

1. Use jQuery's :contains selector to fined the element with the desired text:
   $("div:contains('OPTION 56')")
   (you can make it more specific by adding its parents in the selector).
2. Use jQuery's parent to go to its parents.
3. Use jQuery's remove to remove the "grandfather" node.

Here is a sample code:

 $("div.container > div.box > div:contains('OPTION 56')").parent().parent().remove();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="box"> <div class = "a"> OPTION 12 </div> </div> </div> <div class="container"> <div class="box"> <div class = "b"> OPTION 78 </div> </div> </div> <div class="container"> <div class="box"> <div class = "c"> OPTION 56 </div> </div> </div> <div class="container"> <div class="box"> <div class = "d"> OPTION 90 </div> </div> </div>

Answer 4

I think this solution in javascript can resolve your problem. You have this kind of structure

           <div id="options-container">
                <div class="container">
                  <div class="box">
                    <div class = "a"> OPTION 12 </div>
                   </div>
                </div>
                <div class="container">
                  <div class="box">
                    <div class = "b"> OPTION 78 </div>
                  </div>
                </div>
                <div class="container">
                  <div class="box">
                    <div class = "c"> OPTION 56 </div>
                  </div>
                </div>
                <div class="container">
                  <div class="box">
                    <div class = "d"> OPTION 90 </div>
                  </div>
                </div>
            </div>

I have given id options-container to the parent div. Then applied this solution

var options = document.getElementById('options-container');
              var childElements = options.childNodes;
               childElements.forEach(function(child) {
                  if((child.innerText) === "OPTION 56") {
                     child.remove();
                  }
              });              

It dynamically remove every child which will have value OPTION 56 . I hope it will help you ;)