Как при нажатии кнопки удалить тег "p" с содержимым?

Katerina23 · February 16, 2020

У меня есть тег <p>. В теге <p> размещена кнопка и поле. Можно добавить новый тег <p> c полем и кнопкой. Как при нажатии кнопки удалить тег p с содержимом. Работает только первая кнопка, при создании новых тегов и нажатии кнопки, они не удаляются. Вот код:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<button id="removeAll">Удалить всё</button>
<button id="addLine">Новая линия</button>

<div id="orderForm">
<p class="orderLine" width="90%">
    <input name="field1" type="text" id="field1">
    <button id="removeLine">Удалить</button>
</p>
</div>

</body>

<script type="text/javascript">

$("#removeLine").click(function () {
  $(this).closest('.orderLine').remove();
});
$("#removeAll").click(function () {
        $('.orderLine').remove();
 });

$("#addLine").click(function () {
  $('#orderForm').append('<p class="orderLine" width="90%"><input name="field1" type="text"><button id="removeLine">Удалить</button></p>');
});
</script>
</html>

Edited February 16, 2020 by Katerina23

Switch74 · February 19, 2020

1. На одной странице не должны находиться элементы с одинаковым id (переделываем их на class)
2. Для динамически добавленных элементов требуется снова определять обработчики событий (или использовать делегирование)
https://jsfiddle.net/n250bkd8/

Sign In

Как при нажатии кнопки удалить тег "p" с содержимым?

Question

Katerina23

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information