javascript - Iterate through HTML div and extract the value from a child span using JavaScript or jQuery

Question

How do I find a value in a nested div in JavaScript and hide the div

as an example, if my input to the JavaScript function is Florida.

I would like to loop thru the divs (class name = state-name) , get the value of the inner span (class ="state"). If the value match my input value (Florida) then hide that parent div (state-names) .

<div class="state-names panel panel-default" ">
    <div class="panel-heading">
        <h3 class="panel-title">
               <a> <span class ="state">Alabama (6)</span></a>
        </h3>
    </div>
</div>
<div class=" state-name panel panel-default" ">
    <div class="panel-heading">
        <h3 class="panel-title">
               <a> <span class ="state">Florida (2)</span></a>
        </h3>
    </div>
</div>
<div class=" state-name panel panel-default" ">
    <div class="panel-heading">
        <h3 class="panel-title">
               <a> <span class ="state">Texas (16)</span></a>
        </h3>
    </div>
</div>

How can iterate thru the html tags and get the span value in JS or Jquery

Thanks

标签： javascriptjqueryhtml

Answer 1

You can do this using jQuery as below:

$('.state-names').each(function(i, obj) {
    if($(this).text().includes("Florida")){
      console.log("Found Florida")  
      $(this).hide()
    }
});