CODEWITHSUNDEEP
jqueryclone
ThePHPUnicorn
ThePHPUnicorn

Reputation: 619

Remove cloned row not working jquery

I'm writing something that allows addition and removal of new rows, the original row can be removed, but the cloned ones can't. Here's my JS:

(function( $ ) {

  $.fn.addVarRow = function() {

    // Bind it to a click event
    $(this).click(function(e) {

        e.preventDefault();

        // Set some variables
        var $this = $(this);
        var $target = $('#newVarTable tbody tr:last');
        var $newRow = $target.clone();

        $target.after($newRow);

    })
  }

  $.fn.removeVarRow = function() {

    // Bind it to a click event
    $(this).click(function(e) {

        e.preventDefault();

        // remove row
        $(this).closest('tr').remove();

        return false;

    });
  };

})( jQuery );

jQuery(document).ready(function ($) {

    // Bind the click for adding a row
    $('#addVarRow').addVarRow();
    $('.removeVarRow').removeVarRow();

});

Here's my row:

        <!-- !Repeat me: Start -->
        <tr>
            <td>
                <input type="text" id="varSKU[]" name="varSKU[]" value="" style="width: 99%" placeholder="ie Product number, AB01234">
            </td>
            <td>
                <input type="text" id="varD1[]" name="varD1[]" value="" style="width: 99%" placeholder="ie 'Red'">
            </td>
            <td>
                <input type="text" id="varD2[]" name="varD2[]" value="" style="width: 99%" placeholder="ie 'Large'">
            </td>
            <td><a href="#removeRow" class="removeVarRow">Remove</a></td>
        </tr>
        <!-- Repeat me: End -->

I can't see why, any advice welcomed! Thanks in advance

Upvotes: 0

Views: 1540

Answers (2)

Jeremy Thille
Jeremy Thille

Reputation: 26390

It seems to me that the addVarRow and removeVarRow are not applied to newly created rows. These functions are basically click bindings. If they are not applied to new rows, clicking on them just won't do anything.

I would try to amend the following bit of code in addVarRow: 

$target.after($newRow).addVarRow().removeVarRow();

This would 1. create a row, 2. bind the "new row on click", 3. bind the "delete row on click"

to the newly created row.

Upvotes: 0

adeneo
adeneo

Reputation: 318302

When you're creating a new row it's dynamic, and it does'nt have a removeVarRow method, only the .removeVarRow elements that exists on the page at the time you're running removeVarRow has a removal method, as it does'nt work for future elements with that class.

You'll need to add the click handler to a delegated non dynamic parent, or on the new row as it's created.

(function($) {
   $.fn.addVarRow = function() {
       return this.each(function() {
           $(this).on('click', function(e) {
               e.preventDefault();
               var $target = $('#newVarTable tbody tr:last'),
                   $newRow = $target.clone(false);

               $target.after($newRow);

               /* add a click handler to the newly created element */
               $newRow.find('.removeVarRow').on('click', function(e) {
                   e.preventDefault();
                   $(this).closest('tr').remove();
               });
            });
       });
   };
})(jQuery);

Upvotes: 2

Related Questions