I am unable to delete only one form at a time. In my code, I am able to add forms. But when I want to delete only one form at a time, all the forms that have been created gets deleted except for the first form. My code so far:
<div>
<form class="form" action="" method="" >
product:<input type="text">
price:<input type="text">
<button class="r">remove</button>
</form>
</div>
<div class="class"> </div>
<button class="add"> add </button>
jquery:
$('.add').on('click', function(){
var $clone = $('.form').clone();
$('.class').append( $clone );
});
$('.r').on('click', function(){
$('this').parent('form').remove();
//$('this').parent('div').remove();// even this gives the same result
});
Thanks. You were right. i got the answer.
on
needs to be delegated in order to handle events from dynamic elements.