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

前提・実現したいこと

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

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

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

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

該当のソースコード

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

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

javascript
1
2
3$(function(){
4
5  function buildHTML(){
6    const index = $('.hards-input-text').length;
7    const index2 = $('.fa-minus-square').length;
8    let html = `<div id="best-main-text_box">
9                  <input placeholder="category" type="text" class="hards-input-text" id="hard_text" name="post[programs_attributes][0][hards_attributes][${index}][category]">
10                  <i id="minus-hard" class="far fa-minus-square"></i>
11                  <div id="add"></div>
12                </div>`
13
14    return html;
15  }
16
17  $(".fa-plus-square").click(function(e){
18    e.preventDefault();
19
20    let html = buildHTML();
21    let type_text = document.getElementById("hard_text").getAttribute("type");
22
23    $("#add").addClass("add_text");
24    $(".add_text").append(html);
25    $(".add_text").attr(type_text);
26  });
27
28  $(function(e){
29    const index = $('.hards-input-text').length;
30    const index2 = $('.fa-minus-square').length;
31
32    $(".fa-minus-square").click(function(e){
33      
34        $("#add").addClass("remove_text");
35      $(".remove_text").remove();
36  });
37});
38
39});

試したこと

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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