JQueryでappendしたオブジェクトを消す

探せば、他の人の解説でいっぱいでるが、自宅外から参照する場合の、自分用備忘録として記載する。

　課題

JQueryのappendしたものでは、単純にClickイベントが発生しない、なんでも「.clickは新たに追加されたDOMに影響を与えないから」だそう。

それだと、フォームにオブジェクトを追加したり・消したりと、subumit前に任意操作できるようなUIでは、うまくいかない
多分、厳密にIDを発行してそれを渡すような関数をボタンにでも設定すれば、消せると思うが、面倒なので.clickイベントで.parentから消したいのだ、その場合どうするか。

　解決法

答えは、最大上位のページの関数に設定するとよい

HTML

html

        <fieldset name="testfset" id="testfset">
            <legend id="legend_testfset">test</legend>
        </fieldset>

        <input type="button" value="add" id="jq_test">

Javascript

javascript

$(function() {
 　//追加部
  $('#jq_test').click(function(){
    let html = '<div class="p">aaa<input type="checkbox"><button class="dbtn">del</button></div>';
    $('#testfset').append(html);
  });

  //削除部
  $(document).on("click", ".dbtn", function(){
    $(this).parent().remove();
  });
});

追加するオブジェクトが divに囲まれたもので、そのdivごと消える。
それにcheckboxを入れているのは同じ文字列だけだと、どれを消したか判別しづらいので、確実に判別する為。