CODEWITHSUNDEEP
jquery
user3554221
user3554221

Reputation: 13

JQuery - Why i can't remove a specific cloned form?

i want to remove a specific cloned form.

I have one table and a button, and when you click at the button, it clones the table, now i want to remove a specific table cloned before.

I'm trying to do that, but its not working, what am i doing wrong?

Thanks.

Here my code:

 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <html>
 <head>

<script type='text/javascript'>
   $(window).load(function(){

   $('.remove').click( function() {
     $(this).parents(".addforms:last").remove();
 event.preventDefault();
    });


  $('.clone').on('click', function(e){
  $(".addforms:last").clone().find("input[type='text']").val('').end().insertBefore($(".addforms:first"));
  event.preventDefault();
  }); 

});

</script>

</head>
 </body>
 <form class='cform' method="POST">
<table border='0' style='background: #1D7373; border-bottom: 1px solid #2e9c9c; color:white; width:100%;'>
    <tr class="addforms">
   <td><input class='txtedit' placeholder='Name' type='text'  name='Name' maxlength='130' /></td>

<td><a class="remove">[X]</a></td>
</tr>
         <input style='width: 60px;' type='submit' class='clone' value='+' />
    </table>
    </form>
    </body>
    </html>

Upvotes: 0

Views: 44

Answers (2)

Manwal
Manwal

Reputation: 23816

Instead Of:

<input style='width: 60px;' type='submit' class='clone' value='+' />

Use this: Input time change to Button

<input style='width: 60px;' type='button' class='clone' value='+' />

Complete Code:

$(function () {

    $('.remove').click(function (event) {
        event.preventDefault();
        $(this).parents(".addforms:last").remove();

    });


    $('.clone').click(function () {
        $(".addforms:last").clone().find("input[type='text']").val('').end().insertBefore($(".addforms:first"));
    });

});

Live Demo

Upvotes: 0

Wilmer
Wilmer

Reputation: 2511

You need to use event delegation to deal with elements added after window load:

$("table").on("click", ".remove", function (e) {
    e.preventDefault();
    $(this).parents(".addforms:last").remove();
});

Upvotes: 1

Related Questions