Clever Geek Handbook

How to select a button and remove that button's grandpa grandpa when a button is pressed?

Here is my code.

    $(document).ready(function(){
        $(".btn.btn-default.btn-lg.remove").click(function(){ 
            $(this).parent().remove();
        });
    });

      

        
        
        
      

    
      <div class="row lead"  style="margin-left:100px;color:red">
           <div class="col-md-2"><span style="color:red></div>
           <div class="col-md-2"><span style="color:red"></div>
           <div class="col-md-2"><span style="color:red"></div>
           <div class="col-md-2"><span style="color:red"></div>
               <div class="col-md-3">
                    <button type="button" class="btn btn-default btn-lg remove"> </button> 
                    <button type="button" class="btn btn-default btn-lg"></button>    
                    <button type="button" class="btn btn-default btn-lg"></button>
               </div>
      </div>

I want the entire div to be removed when the class = "btn btn-default btn-lg remove" button is clicked. I cannot use id because I am dynamically appending the above div using append jquery.

+3


source to share


3 answers


you can use closest 



$(document).ready(function(){
    $(".btn.btn-default.btn-lg.remove").click(function(){ 
        $(this).closest('.row').remove();
    });
});
+5


source


I think you just want to get one level higher? This removes all of the div line output.



$(document).ready(function(){
       $(".btn.btn-default.btn-lg.remove").click(function(){ 
       $(this).parent().parent().remove();
     });
  });
+2


source


use closest () in jquery 

 $(document).ready(function(){
     $(".btn.btn-default.btn-lg.remove").click(function(){ 
             $(this).closest(".row.lead").remove();
     });
});
0


source






More articles:


All Articles