Dynamically repeat and remove form elements using JQuery

Question

I have a form with additional add and remove buttons. Upon clicking these buttons, the same form row is repeated or completely removed.

You can check out the demo for the same here at JSFiddle

Problem 1: Adding rows

When, I click on the + button for the first time, it adds one row.

The above becomes this:

However, if I add click on the + button one more time, then 2 rows are added. After that 4 rows are added and so on.

Problem 2: Deleting rows

Similarly, on clicking the - button, the entire row is deleted. It should ideally only the current row.

I think I am missing something pretty basic here (about figuring out paths), but am not able to get it running even after multiple attempts. Can someone please have a look.

user_11829408 · Answer

It is because you need to clone the elements, if not you will keep the same pointer and thus deleting one will result in deleting the whole list. This solution mantains your style:

function addFormElements(current) {
    $(current).parents('.form-list').append($(current).parents('.form-row').clone())
}

function removeFormElements(current) {
    $(current).parents('.form-row').remove();
}

An improved solution would use passive event listener, to split HTML and JS, and will probably use a separate template to clone (in your solution, writing in one element and then clicking on add will result in two items with the same content).

function addFormElements() {
    $('.form-list').append($("#form-template .form-row").clone())
}

function removeFormElements() {
    $(this).parents('.form-row').remove();
}

$(document).ready(addFormElements); 
$(document).on("click", ".add-btn", addFormElements);
$(document).on("click", ".remove-btn", removeFormElements);

Dynamically repeat and remove form elements using JQuery

1 Answers