Question

我试图通过单击bootstrap模式中的删除按钮来删除一行：

$('#delete').click(function() {
    $('.dlt').closest('tr').remove();
});

如果我使用.dlt表示所有行都被删除。因为我正在动态获取数据。如何只删除当前行？

小提琴：https://jsfiddle.net/otz2ojm1/

Answer 1

1）使用此而不是类名，并在点击功能上使用 .dlt 来获取所有点击事件。

2）点击事件使用$('#confirm').show()函数

显示模型

3）通过id删除或取消捕获事件并分别进行操作。

＆＃13;

var roleList=[{
"sNo"     :"1",
"roleName":"Designer",
"edit"    :"Edit",
"dlt"     :"Delete"
},
{
"sNo"     :"2",
"roleName":"Developer",
"edit"    :"Edit",
"dlt"     :"Delete"
},
{
"sNo"     :"3",
"roleName":"HR Dept",
"edit"    :"Edit",
"dlt"     :"Delete"
},
{
"sNo"     :"4",
"roleName":"Project Manager",
"edit"    :"Edit",
"dlt"     :"Delete"
}
];

$(document).ready(function(){
	   empRoles();
	    $('.dlt').click(function(){
          old = $(this);
          $('#confirm').show();
            $('#delete').click(function(){
             old.closest('tr').remove();
              });
	   });
});
function empRoles(){
	for(var i=0;i<roleList.length;i++)
	   {
	   	var table='<tr><td>'+roleList[i].sNo+'</td><td>'+roleList[i].roleName+'</td><td><button class=" edit "><i class="fa fa-pencil"></i>'+roleList[i].edit
	   	           +'</button><button class="dlt " data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>'+roleList[i].dlt+'</button></td><tr>';
	   	$('#roleListTable').append(table)
	   }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		
			
			    <div class="col-lg-12 col-md-12 col-xs-12 padding table-responsive">
					<table class="table table-hover table-bordered">
						<thead class="roleListTableHead">
							<tr>
								<td>S.NO</td>
								<td>ROLE NAME</td>
								<td>ACTION</td>
							</tr>
						</thead>
						<tbody id="roleListTable">
							
						</tbody>			
					</table>
			    </div>
			    <div id="confirm" class="modal fade">
				  <div class="modal-dialog">
				      <div class="modal-content">
						  <div class="modal-body">
						    Are you sure?  Do you want to delete this record?
						     <div class="modal-footer">
							    <button type="button" data-dismiss="modal" class="btn btn-warning  btn-xs" id="delete">Delete</button>
							    <button type="button" data-dismiss="modal" id="cancel" class="btn btn-info btn-xs">Cancel</button>
						    </div>
						  </div>
					  </div>
				  </div>
	            </div>

＆＃13;

使用此而不是类名，并在点击功能上使用 .dlt 来获取所有点击操作。

$(document).ready(function(){
   empRoles();
   $('.dlt').click(function(){
      $(this).closest('tr').remove();
   });
});

Answer 2

要解决此问题，您应该将click事件挂钩到.dlt元素，然后使用事件处理程序中的this关键字来引用所单击的元素。然后closest('tr')将找到您需要删除的元素。

另请注意，在动态构建表内容时，可能需要使用委派的事件处理程序。试试这个：

$(document).ready(function() {
    empRoles();
    $('#roleListTable').on('click', '.dlt', function() {
        $(this).closest('tr').remove();
    });
});

Updated fiddle

使用确认框删除动态行

2 个答案: