how to remove entire div row when remove clicked jquery

Question

I have a listing page which shows messages fectched form DB.

How can i remove the entire div when the red X button is clicked, including that button itself and auto adjust the listing table after.

I made this as a col-md-12 with child of col-md-4*5*2*1. the columns.

the HTML

<div class="col-md-12" style="background-color:white;padding:15px;">
 <div class="col-md-2">
   <a href="#">
          <img class="media-object" style="" src="<?php echo base_url($message->media->file_name);?>" data-holder-rendered="true" style="width: 80px; height: 80px;float:left:padding:5;">
        </a>
 </div>
    <div class="col-md-2 column_border">


        <div class="full_name" style="float:right;padding:5px;">
         <a href="<?php echo base_url('sell/seller').'/'.$message->profile_id;?>">
          <?php echo $message->full_name;?></a>
         <p class='state' style="font-weight:100;"> <?php echo $message->city.' '.$message->state;?></p>
         <p>
         <i class='messages glyphicon glyphicon-record' style='color:#69DA32;padding-right:2px;'></i>User is online
        </p>
        </div>

    </div>

  <div class="col-md-5">

   <div class="message_content column_border" style="float;left;padding:5px;">
        <span class="subject"> <?php echo $message->subject;?></span>
        <p class='messages'>
          <?php echo $message->message_text;?>
        </p>

        </div>
 </div>
  <div class="col-md-2">
   <div class="date_column" style="float:left;padding:5px;">
        <span class="date"> <?php echo $message->date;?></span>
        <p class='messages'> <?php echo $message->time;?></p>

        </div>
 </div>
 <div class="col-md-1" >
   <div class="message_content" style="float:right;padding:5;">
        <a href="#"><i class='glyphicon glyphicon-remove' style='color:red;padding-right:2px;'></i></a>
        </div>

 </div>

 </div>

Thankyou

can you post the javascript/jquery you have so far. Or better yet a jsfiddle? — atmd, Jul 23 '15 at 07:36

score 3 · Answer 1 · answered Jul 23 '15 at 07:36

3

Use click handler for remove button. traverse to closest row with class col-md-12 using .closest() selector along with .remove() to remove it:

$('.glyphicon-remove').click(function(){
 $(this).closest('.col-md-12').remove();
});

answered Jul 23 '15 at 07:36

Milind Anantwar

81,290
25
94
125

score 3 · Answer 2 · answered Jul 23 '15 at 07:41

Find closest row wrapper and remove it

$(document).ready(function() {
  $('.remove').click(function() {
    $(this).closest('.wrapper').remove();
  });
});

* {
  box-sizing: border-box;
}
[class^="col-"] {
  float: left;
  border: 1px solid #ddd;
}
.wrapper {
  border: 1px solid #dfd;
}
.col-xs-12 {
  width: 100%;
  float: left;
}
.col-xs-8 {
  width: 80%;
  float: left;
  height: 40px;
}
.col-xs-4 {
  width: 20%;
  float: left;
  height: 40px;
}
.remove {
  font-weight: bold;
  font-size: 20px;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 wrapper">
  <div class="col-xs-8">DIV</div>
  <div class="col-xs-4"><span class="remove">&times;</span>
  </div>
</div>
<div class="col-xs-12 wrapper">
  <div class="col-xs-8">DIV</div>
  <div class="col-xs-4"><span class="remove">&times;</span>
  </div>
</div>
<div class="col-xs-12 wrapper">
  <div class="col-xs-8">DIV</div>
  <div class="col-xs-4"><span class="remove">&times;</span>
  </div>
</div>
<div class="col-xs-12 wrapper">
  <div class="col-xs-8">DIV</div>
  <div class="col-xs-4"><span class="remove">&times;</span>
  </div>
</div>
<div class="col-xs-12 wrapper">
  <div class="col-xs-8">DIV</div>
  <div class="col-xs-4"><span class="remove">&times;</span>
  </div>
</div>

score 2 · Accepted Answer · edited Jul 23 '15 at 08:21

2

<a href="#"><i class='glyphicon glyphicon-remove' style='color:red;padding-right:2px;'></i></a>

change to:

<a href="" class="remove" data-id="<?=$message->id;?>"><i class='glyphicon glyphicon-remove' style='color:red;padding-right:2px;'></i></a>

then:

<script>
$(function(){
   $('a.remove').on('click', function(e){
      e.preventDefault();
      var $this = $(this);
      var id = $this.data('id');
      $.get('/messages/delete/'+id, {}, function(response){
         $this.parent().parent().parent()
              .fadeOut(300, function(){$(this).remove();});
      });
   });
});
</script>

edited Jul 23 '15 at 08:21

Develop4Life

7,581
8
58
76

answered Jul 23 '15 at 07:41

num8er

18,604
3
43
57

Thankyou ! a brilliant answer! – Develop4Life Jul 23 '15 at 08:20
Please if you have time i have one headache problem. Its about navigatiing to a page which has boostrap tab and when u select that link unless the tab is on that page it didnt bring you the content of the tab? ⁰ – Develop4Life Jul 23 '15 at 08:23
1

Please create question to discuss it. – num8er Jul 23 '15 at 08:26

score 0 · Answer 4 · answered Jul 23 '15 at 07:42

You need to add class remove to anchor tag.

$(document).ready(function(){
$('a.remove').click(function(){
  $(this).parent().parent().remove();
})
})

        <a href="#" class="remove"><i class='glyphicon glyphicon-remove' style='color:red;padding-right:2px;'></i>fgdfgdfgfdg</a>

how to remove entire div row when remove clicked jquery

4 Answers4