Isolution666
@Isolution666
Full-Stack Developer

Удаление конкретного элемента на jQuery?

Здравствуйте.
--
Предыстория:
Есть форма, которая отправляет содержимое инпутов в некий скрипт, функцию.
Вёрстка табличная, изначально, форма содержит <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 нельзя.

---
Заранее благодарю.
  • Вопрос задан
  • 2215 просмотров
Решения вопроса 2
Stalker_RED
@Stalker_RED
$('.btn-del').on('click', function(){ // на элементы с классом .btn-del вешается обработчик
  $(this).closest('tr').remove(); // который находит ближаейший родительский tr и удаляет.
})
Ответ написан
tema_sun
@tema_sun
$("table").on( "click", "button", function() {
    	$(this).parents('.del').remove();
    });
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
XXXXPro
@XXXXPro
Fullstack Web developer
Нужно прописывать для каждого tr свой id и удалять по нему.
Т.е. что-то вроде
$('table').append('x');
И потом удалять по селектору #del_номер.
Другой вариант — сразу при создании tr вешать на него событие click и удалять по нему:
$('.add_to_this').append(function() {
  return $(''<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>'').click(
  function() {
    $(this).remove();
  });
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы