jquery - 删除带有确认框的动态行

Question

我试图通过单击 Bootstrap 模式中的删除按钮来删除行:

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

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

fiddle :https://jsfiddle.net/otz2ojm1/

Answer 1

1)使用this代替类名，并在点击函数上使用.dlt来获取所有点击事件。

2) 在点击事件上使用 $('#confirm').show() 函数显示模型

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

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

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

使用this代替类名，并在点击函数上使用.dlt来获取所有点击操作。

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