How to prevent jQuery.remove () from deleting the parent class

Question

I created a function of the clone element, which can be viewed to see the demo here . When the reset button is pressed, it deletes all cloned elements of the element, however, when you try to add another element to the list of items, the added "NEW" element does not appear in the DOM.

$('#add-btn').on('click',function(){ $('.list-items:first').clone().appendTo("#items").addClass('isVisible'); $('#items-fields').val(''); }) // RESET BUTTON $('.reset').on('click', function(){ if( $('.list-items').length != 1); $('.list-items:last').remove(); event.preventDefault(); }) 

Answer 1

If you have a reset button, change the code in the if statement to the following

 $('.reset').on('click', function(){ if($('.list-items').length > 1) { $('.list-items:last').remove(); } }) 

At the moment, you have set your list items as follows.

 When a user clicks the delete button, if the number of things with the class list-item does not equal 0, then remove the last list-item 

You need to change its code so that it does the following:

 When a user clicks the delete button, if the number of things with the class list-item is greater than 1, then remove the last list-item 

Answer 2

You should replace this:

 var eleClone = $('list-items').clone(true); 

:

 var eleClone = $('.list-items').clone(true); 

You are looking for an element that is 'id' is a 'list-item', while you want to find an element that is a 'list'.