单击relevent按钮时如何隐藏relevent div

Question

I have a dynamic div's which needed to hide when relevant delete button clicked. This divs also have dynamic id's. i want to hide relevant div where button is clicked. im only getting the first div id all the time. Im new to jQuery can someone please help.

$(document).ready(function(){
  $(".reBox").click(function() {
    alert($('.reBox').attr('id'));
      // $(this).hide(); 
});
});

<div class="boxx" id="<?php echo $tot_meal; ?>">
  <div class="reBox" id="<?php echo $tot_meal; ?>">
     <img src="../images/error.png" width="16px" height="16px" />
  </div> 
</div>

Answer 1

As you have dynamic html elements use .on() . Try this:

$(document).ready(function(){
  $(".boxx").on('click','.reBox',(function() {
      $(this).hide(); //to hide reBox
      $(this).parent("div.boxx").hide(); //to hide boxx element
});
});

Answer 2

Since you have dynamic elements, try event delegation

$(document).on('click', ".reBox", function () {
    console.log(this.id);
    $(this).hide();
    //if you want to close boxx
    // $(this).closest('.boxx').hide();
});