Здравствуйте.
--
Предыстория:
Есть форма, которая отправляет содержимое инпутов в некий скрипт, функцию.
Вёрстка табличная, изначально, форма содержит
<table></table> - пустым.
Но потом появляются
<tr></tr> - в который содержится информация. Удалять и добавлять html код я умею, а вот убирать конкретный элемент не могу. Сейчас поясню. Дело в том, что если удалять при клике
<tr>, то я не могу заполнить инпуты, элемент исчезает, что не подходит. Если передаю по клику на кнопку удаления, то удаляется только кнопка, а строка остаётся. Внятных ответов по этому вопросу я не нашёл, удалять определённую строку я могу, но хотелось бы удалять её по клику в конкретном месте, а не в любом, куда попадёшь, вот исходный код:
<!DOCTYPE html>
<html>
<head>
<style>
input{width:95%;padding:10px;}
button{cursor:pointer;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var i = 1;
$("table").on( "click", "button", function() {
$(this).remove();
});
$("#btn").click(function(){
$('table').append('<tr class="del"><td><input type="text" name="name'+i+'" placeholder="название"/></td><td><input type="text" name="simbol'+i+'" placeholder="значение"/></td><td><button>x</button></td></tr>');
i++;
});
});
</script>
</head>
<body>
<p>Чтобы сформировать массив данных нажмите. <button id="btn">добавить поле</button></p>
<i>И заполните поля</i>
<form action="" method="post">
<table style="width:100%;">
</table>
</form>
</body>
</html>
Вопрос: В чём моя ошибка, что я делаю не так? В данном случае, как в примере выше, при клике на кнопку удаления, будут удаляться все строки, а не та, на которую я нажал, в моём случае, подойдёт только
remove(), прятать код css нельзя.
---
Заранее благодарю.
