jqueryでフォームの追加・削除をできるようにしたい

Question

前提・実現したいこと

jqueryでフォームの追加・削除をできるようにしたいです。
追加はできますが、削除が理想通りに実装できていない状況です。

一番上の入力フォームがあり横に＋ボタンと-ボタンを設置しています。
＋ボタンを押すと入力フォームが追加されフォームの横には-ボタンのみが現れます。
一番上の＋ボタンを押してフォームを次々と追加できるようにし、削除したいフォームは横の-ボタンを押すと削除されるという仕組みにしたいです。

ですが実際には一番上の-ボタンを押さないと削除できませんし、全て同じ条件なので追加したフォームが全て消えてしまいます。

どのように実装を進めればいいのかわからないので、ご教授頂けるとありがたいです。

該当のソースコード

hamlは該当箇所を一部抜粋。

.best-main
  .best-main-text
    ハード
    = d.fields_for :hards, class:"hards-parent" do |m|
      #best-main-text_box
        = m.text_field :category, placeholder: "category", type: "text", class:"hards-input-text", id: "hard_text"
        = icon('far', 'plus-square', id: 'pulas-hard')
        = icon('far', 'minus-square', id: 'minus-hard')
        #add

$(function(){

  function buildHTML(){
    const index = $('.hards-input-text').length;
    const index2 = $('.fa-minus-square').length;
    let html = `<div id="best-main-text_box">
                  <input placeholder="category" type="text" class="hards-input-text" id="hard_text" name="post[programs_attributes][0][hards_attributes][${index}][category]">
                  <i id="minus-hard" class="far fa-minus-square"></i>
                  <div id="add"></div>
                </div>`

    return html;
  }

  $(".fa-plus-square").click(function(e){
    e.preventDefault();

    let html = buildHTML();
    let type_text = document.getElementById("hard_text").getAttribute("type");

    $("#add").addClass("add_text");
    $(".add_text").append(html);
    $(".add_text").attr(type_text);
  });

  $(function(e){
    const index = $('.hards-input-text').length;
    const index2 = $('.fa-minus-square').length;

    $(".fa-minus-square").click(function(e){
      
        $("#add").addClass("remove_text");
      $(".remove_text").remove();
  });
});

});

試したこと

追加したフォームの横の-ボタンが押して反応するようにさせたいので、-ボタンにname="[0]"のように１つ増えるごとにカウントが増えていくようにして、その数字を取得できたら、それぞれのフォームと識別できてうまくいくのかと予想して実装しましたが
数字を取得するやり方がうまく行きませんでした。

Answer 1

実際には一番上の-ボタンを押さないと削除できません

jQueryのonメソッドを使用すると解決できると思います。JavaScriptではクリックイベント等で動的追加した要素にもイベントを設定したい場合はonメソッドを用います。jquery on 動的追加等で検索をかけると質問者様が抱える問題を解決できそうな記事が多く見つけることができると思います。

全て同じ条件なので追加したフォームが全て消えてしまいます。

解決方法は多くありますが、jQueryを使用しているなら$(this)を使用すると解決できると思います。

Comments

[ringo_000]

onメソッドとthisについて調べさせて戴きました。
まさに思った通りの実装ができました！
まだ整えないとおかしい動作はありますが概ね理想通りに行きました、とても勉強になりました。
本当にありがとうございました。