javascript - How to select a button and delete a grandparent div of that button when the button is clicked?

This 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 get deleted when the button of class="btn btn-default btn-lg remove" gets clicked. I cant use id because i am dynamically appending the above div using append jquery.

This 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 get deleted when the button of class="btn btn-default btn-lg remove" gets clicked. I cant use id because i am dynamically appending the above div using append jquery.

Share Improve this question edited Dec 24, 2014 at 2:45 Zanon 30.9k21 gold badges118 silver badges126 bronze badges asked Dec 19, 2014 at 13:42 Karthik Amar 2175 silver badges17 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 6

You can use closest

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

I guess you just want to get one level higher? This deletes the whole div "row lead".

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

use closest() in jquery

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to select a button and delete a grandparent div of that button when the button is clicked? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)