我该如何移除 <p> 在Rails 4中使用jQuery标签

Question

I have:

$(document).ready(function() {
    $("#btn1").click(function() {
        $("#po").append("<p><%= j f.datetime_select :dtmRealshow%><a>Remove</a></p>");
    });   
});


<p id="po"></p>
<button id="btn1">+</button>

When i click on the btn1 a new datetime_select field is added to the form.But i want to remove the parent <p> tag after clicking on the remove link.Please help me out.

Answer 1

Add a css class to anchor

$("#po").append("<p><%= j f.datetime_select :dtmRealshow%><a class='remove'>Remove</a></p>");  });

Then you can use Event Delegation using .on() delegated-events approach to bind click handler to anchor .

$("#po").on('click', ".remove", function(){
    $(this).closest('p').remove();
});

Answer 2

Removing the parent <p> will remove it's children along with it.

If that's what you're looking for then try the following code.

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#po").append("<p><a id='remove'>Remove</a></p>");
        $("#remove").click(function() {
            $(this).closest('p').remove();
        });
    });
});

Here is the demo