Я пытаюсь удалить строку, нажав кнопку Удалить в загрузочном модальный:Удалить динамическую строку с подтверждением поле
$('#delete').click(function() {
$('.dlt').closest('tr').remove();
});
Если я использую .dlt означает, что все строки становится deleted.Because, я получаю данные динамически. Как удалить только текущую строку?
Fiddle: https://jsfiddle.net/otz2ojm1/
1) Используйте этот вместо имени класса и использовать .dlt на функции мыши, чтобы получить все события щелчка.
2) на событие щелчка показать модель с помощью $('#confirm').show() функции
3) и захватить событие по идентификатору удалить или отменить и сделать операцию соответственно.
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(){
\t empRoles();
\t $('.dlt').click(function(){
old = $(this);
$('#confirm').show();
$('#delete').click(function(){
old.closest('tr').remove();
});
\t });
});
function empRoles(){
\t for(var i=0;i<roleList.length;i++)
\t {
\t \t 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
\t \t +'</button><button class="dlt " data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>'+roleList[i].dlt+'</button></td><tr>';
\t \t $('#roleListTable').append(table)
\t }
}<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>
\t \t
\t \t \t
\t \t \t <div class="col-lg-12 col-md-12 col-xs-12 padding table-responsive">
\t \t \t \t \t <table class="table table-hover table-bordered">
\t \t \t \t \t \t <thead class="roleListTableHead">
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td>S.NO</td>
\t \t \t \t \t \t \t \t <td>ROLE NAME</td>
\t \t \t \t \t \t \t \t <td>ACTION</td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t </thead>
\t \t \t \t \t \t <tbody id="roleListTable">
\t \t \t \t \t \t \t
\t \t \t \t \t \t </tbody> \t \t \t
\t \t \t \t \t </table>
\t \t \t </div>
\t \t \t <div id="confirm" class="modal fade">
\t \t \t \t <div class="modal-dialog">
\t \t \t \t <div class="modal-content">
\t \t \t \t \t \t <div class="modal-body">
\t \t \t \t \t \t Are you sure? Do you want to delete this record?
\t \t \t \t \t \t <div class="modal-footer">
\t \t \t \t \t \t \t <button type="button" data-dismiss="modal" class="btn btn-warning btn-xs" id="delete">Delete</button>
\t \t \t \t \t \t \t <button type="button" data-dismiss="modal" id="cancel" class="btn btn-info btn-xs">Cancel</button>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t </div>использование это вместо имени класса и использовать .dlt на функции мыши, чтобы получить все щелчок действия.
$(document).ready(function(){
empRoles();
$('.dlt').click(function(){
$(this).closest('tr').remove();
});
});
Чтобы решить эту проблему, вы должны подключить click событие к .dlt элементов, а затем использовать this ключевое слово в обработчике события для ссылки на щелкнул элемент. closest('tr') найдет элемент, который вам нужно удалить.
Также обратите внимание, что вам придется использовать делегированный обработчик событий при динамическом построении содержимого таблицы. Попробуйте это:
$(document).ready(function() {
empRoles();
$('#roleListTable').on('click', '.dlt', function() {
$(this).closest('tr').remove();
});
});
попробовать мой обновленный ответ – JYoThI