$（this）.parent（）。remove（）はページをリフレッシュさせます

Question

私はボタンをクリックするとフォームを挿入するページを持っています。無限のフォームを追加できます。各フォームには、フォームを削除するためにクリックできるボタンもあります。

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(); 
     }); 
    } 

上記のコードでフォームが削除されますが、ページがリフレッシュされ、 '？'が追加されます。 URLの末尾に移動します。

これはなぜ起こっているのでしょうか？ご協力いただきありがとうございます！

Answer 1

クリックハンドラからフォームが送信されないようにするには、return falseが必要です。

Answer 2

必要に応じて、ここからコードをコピーして置き換えることができます。

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