0

I'm new to jQuery and am trying to just create a load of simple test rows and be able to create new rows by clicking the add button and remove each row by clicking their corresponding 'delete' text. For some reason, whenever the first row is deleted, I can no longer add new rows.

Here's the HTML:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='all'>
  <button class='add'>Add</button>
  <div class='row'>hi - <span class='del'>delete</span></div>
</div>

And the jQuery:

var row, add, rows;

$(document).ready(function(){  
  row = $('.row'); // problem? because it's not a clone?
  add = $('.add');
  rows = $('.row');
  add.on("click", function(){
    row.clone().appendTo($('#all')); // problem? because it's now gone?
    rows = $('.row');
    updateRows();
  });
});

function updateRows() {
  rows.on("click", ".del", function(){
    $(this).parent().fadeOut(1000, function(){
      $(this).remove();
    });
    rows = $('.row');
  });
}

I've also made a CodePen demo if that helps. So my question is, why does the 'add' button stop working after the first row is deleted? I wonder whether once the first row is deleted, it can't be appended as the variable is then deleted, and if I'm right, how can you create a variable clone that stays even when it's deleted (if you know what I mean)?

Thanks for any help here - any explanations would be much appreciated.

user8758206
  • 2,106
  • 4
  • 22
  • 45
  • I thought it might be this. I tried creating the row variable as the html of the row, but then you can't append it – user8758206 Jan 11 '19 at 21:28
  • 1
    Or you could change `row.clone()` to `$(".row").first().clone()` - but then you have the same problem if you delete *all* the rows - which you mitigate with a check on delete rows so last one can't be deleted. – freedomn-m Jan 11 '19 at 21:30
  • 1
    You're also re-adding the del click handler each time - as you're using event delegation to a degree - change it to `$("all").on("click", ">.row>.del", ` then it can be added once (ie remove `updateRows()` completely and put inside doc ready. – freedomn-m Jan 11 '19 at 21:33
  • I tried this here but still doesn't work: https://codepen.io/anon/pen/MZzbqY – user8758206 Jan 11 '19 at 21:50

2 Answers2

2

You can copy the outerHTML of the row so that it's always available. Using $(".row").first().html() only copies the inner HTML (so doesn't include the class=row part).

This gives you:

var row = $(".row").first().outerHTML(); // store first row
$('.add').on("click", function() {
  $("#all").append(row); 
});

Copy outerHTML taken from: https://stackoverflow.com/a/4180972/2181514

As you're using event delegation for the del button, you only need to call this once, giving:

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  };
})(jQuery);

$(document).ready(function() {
  var row = $(".row").first().outerHTML(); // store first row
  $('.add').on("click", function() {
    $("#all").append(row);
  });

  $(document).on("click", ".row>.del", function() {
    $(this).closest(".row").fadeOut(1000, function() {
      $(this).remove();
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='all'>
  <button class='add'>Add</button>
  <div class='row'>hi - <span class='del'>delete</span></div>
</div>

Updated codepen: https://codepen.io/anon/pen/qLQqJm

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
1

If you delete the only row, there will be nothing inside of the variable row and therefore cause an error when you call row.clone(). You could set row = the html string of the row you wanted to .clone() and instead append the row as html to your div

var row, add, rows;

$(document).ready(function(){  
  row = '<div class="row">hi - <span class="del">delete</span</div>'; // changed to html string to append to div
  add = $('.add');
  rows = $('.row');
  add.on("click", function(){
    $('#all').append(row);
    rows = $('.row');
    updateRows();
  });
});

function updateRows() {
  rows.on("click", ".del", function(){
    $(this).parent().fadeOut(1000, function(){
      $(this).remove();
    });
    rows = $('.row');
  });
}

See updated codepen: (https://codepen.io/anon/pen/NeEbbL)

Ryan Wilson
  • 10,223
  • 2
  • 21
  • 40