Katerina23

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

Recommended Posts

У меня есть тег <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 by Katerina23

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,780
    Total Members
    3,128
    Most Online
    Agentbk
    Newest Member
    Agentbk
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.