how to get the value of h4 element enclosed in child classes-CodePudding

 <div id="available_data">
  <div  id="100000">
    <div ><h3>100000</h3></div>
    <div >
        <h4 id="data_amount" value="0">
        <i ></i>0<input type="hidden" id="data11" name="dataname[]" value="100000" > <i ></i>
        </h4>
    </div>  
</div>
<div  id="110000">
    <div ><h3>110000</h3></div>
    <div >
        <h4 id="data_amount" value="0">
        <i ></i>0<input type="hidden" id="hdr_amt" name="hdr_amt[]" value="0" ><input type="hidden" id="data11" name="dataname[]" value="110000" > <i ></i>
        </h4>
    </div>
</div>

I need the h4 value of that particular row childdata when i click on the removedata . Is this Possible? i have tried many ways but i am unable to get the value. can anyone help me on this ?

CodePudding user response：

If you are using jQuery you can use closest

$("i.removedata").click(function() {
  const $h4 = $(this).closest("h4");
  const value = $h4.attr("value");
  console.log(value);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div id="available_data">
  <div  id="100000">
    <div ><h3>100000</h3></div>
    <div >
        <h4 id="data_amount" value="0">
        <i ></i>0<input type="hidden" id="data11" name="dataname[]" value="100000" > <i ></i>
        </h4>
    </div>  
</div>
<div  id="110000">
    <div ><h3>110000</h3></div>
    <div >
        <h4 id="data_amount" value="10">
        <i ></i>0<input type="hidden" id="hdr_amt" name="hdr_amt[]" value="0" ><input type="hidden" id="data11" name="dataname[]" value="110000" > <i ></i>
        </h4>
    </div>
</div>