Question

I have a page, which on click of a button, you insert a form. An infinite number of forms can be added. Each form also has a button which can be clicked to remove the form.

    var form = " Name:<input id=\"room\" type=\"text\" /><br />\
                 Age:<input id=\"floor\" type=\"text\" /><br />\
                 <button class=\"removeParentForm\">Delete Form</button>";

    var formid = 0;

   $("#addForm").click(function () {
        formid = 1 + formid;
        $('#forms').append("<form id= \"formID" + formid + "\" class=\"pr\"><br /></form>");
        $('#formID'+formid).append(form);
        handleForm();
    });

    function handleForm(){
        $('.removeParentForm').click( function() {
            $(this).parent().remove();
        });
    } 

The above code causes the form to be removed, but then it triggers a page refresh and appends ‘?’ to the end of the URL.

Any idea why this may be happening? Thank you in advance for your help!

Answer 1

You need to return false from the click handler to prevent the form from being submitted.