Корректное удаление строки из таблицы
Всем привет!
Есть код:
$('tr i#delete-product').click(function(event) {
Idproducttr = event.target.closest("tr").getAttribute('data-shopcode');
var html;
$('#testConfirm').addClass('simple-dialog active');
html = '<div class="simple-dialog-content">';
html += '<div class="simple-dialog-header"><h3 class="title">Подтвердите</h3></div>';
html += '<div class="simple-dialog-body"><p class="message">Удалить</p></div>';
html += '<div class="simple-dialog-footer clearfix"><button class="simple-dialog-button accept" data-action="submit">ОК</button><button class="simple-dialog-button cancel" data-action="submit">Нет</button></div>';
html += '</div>';
$('#testConfirm').html(html);
$(document).on('click', 'button[data-action="submit"]', function(e) {
// e.preventDefault();
$(this).parents('.simple-dialog').removeClass('active');
if($(this).hasClass('accept')) {
event.target.closest("tr").remove();
console.log(Idproducttr);
}
if($(this).hasClass('cancel')) {
console.log('cancel');
}
});
});
Он удаляет строку из таблицы с товарами заказа. Суть в том что при повторном нажатии на иконку удалить, он возвращает данные предшествующего элемента, а при третьем нажатии данные двух предыдущих. Т.е. создается массив с данными как я понял. Как сделать чтобы при повторном нажатии удалялась нужная строки и возвращались данные только той строки в которой была нажата кнопка удалить? HTML строки таблицы: <tr data-shopcode="TS62969"> <td class="text-push">TS62969</td> <td>Прямой терморегулирующий вентиль 1/2" ВР (арт. FT 1640 12)</td> <td class="text-push product-qty" data-type="product_qty" id="edit-data">2</td> <td class="text-center">шт</td> <td class="text-push" nowrap=""><span class="product-price">883</span> руб.</td> <td class="text-push" nowrap=""><span class="ammount-products-price">1766</span> руб.</td> <td class="action edit"><i class="fa fa-pencil-square fa-2x" aria-hidden="true"></i></td> <td class="text-center"><i class="fa fa-trash-o fa-2x" aria-hidden="true" id="delete-product"></i></td> </tr> |
Alex57B,
клик в клике не назначают, если конечно не хотят убить браузер |
рони,
Т.е. надо две функции? Первая для вызова всплывающего окна, вторая для удаления при клике на кнопку "ОК" из всплывающего окна? |
Alex57B,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#testConfirm {
display: none;
}
#testConfirm.active {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var html;
html = '<div class="simple-dialog-content">';
html += '<div class="simple-dialog-header"><h3 class="title">Подтвердите</h3></div>';
html += '<div class="simple-dialog-body"><p class="message">Удалить</p></div>';
html += '<div class="simple-dialog-footer clearfix"><button class="simple-dialog-button accept" data-action="submit">ОК</button><button class="simple-dialog-button cancel" data-action="submit">Нет</button></div>';
html += '</div>';
$('#testConfirm').html(html);
var tr;
$('#testConfirm').on('click', 'button[data-action="submit"]', function(e) {
if ($(this).is(".accept")) {
tr && tr.remove();
}
$('#testConfirm').removeClass('simple-dialog active');
});
$('tr i#delete-product').click(function(event) {
tr = $(this).parents("tr");
$('#testConfirm').addClass('simple-dialog active');
});
});
</script>
</head>
<body>
<table>
<tr data-shopcode="TS62969">
<td class="text-push">TS62969</td>
<td>Прямой терморегулирующий вентиль 1/2" ВР (арт. FT 1640 12)</td>
<td class="text-push product-qty" data-type="product_qty" id="edit-data">2</td>
<td class="text-center">шт</td>
<td class="text-push" nowrap=""><span class="product-price">883</span> руб.</td>
<td class="text-push" nowrap=""><span class="ammount-products-price">1766</span> руб.</td>
<td class="action edit"><i class="fa fa-pencil-square fa-2x" aria-hidden="true"></i></td>
<td class="text-center"><i class="fa fa-trash-o fa-2x" aria-hidden="true" id="delete-product">x</i></td>
</tr>
</table>
<div id="testConfirm"></div>
</body>
</html>
|
рони,
главный специалист этого форума :) Спасибо огромное! Пойду AJAX прикручивать и пересчет общей стоимости заказа при удалении строки. |
| Часовой пояс GMT +3, время: 00:59. |