删除单击的jquery时如何删除整个div行

Question

我有一个列表页面，显示从DB中获取的消息。

如何在单击红色X按钮时删除整个div，包括该按钮本身并在之后自动调整列表。

我用col-md-4 * 5 * 2 * 1的孩子作为col-md-12。列。

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>

三江源

Answer 1

使用click handler for remove按钮。使用col-md-12选择器和.closest()遍历到距离类.remove()最近的行以删除它：

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

Answer 2

查找最近的行包装并将其删除

$(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>

Answer 3

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

更改为：

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

然后：

<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>

Answer 4

您需要将类remove添加到锚标记。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;