javascriptでHTMLを追加したい

Question

クックパットのようなレシピサイトなどによくある＋を押したら入力フォームが増えるような仕組みをつくりたいです。

      <table class="material_form">
        <tr class="add_form">
          <th>
            <input type="text" placeholder="材料" class="material" />
            <input type="text" placeholder="分量" class="material" />
            <span class="form_plus">+</span>
            <span class="form_minus">-</span>
          </th>
        </tr>
      </table>

  let target_forms = document.querySelectorAll(".add_form");
  let plus_forms = document.querySelectorAll(".form_plus");

  function add_form() {
    let add_form_html =
      '<tr class="add_form">' +
      "<th>" +
      '<input type="text" placeholder="材料" class="material" /> ' +
      '<input type="text" placeholder="分量" class="material" /> ' +
      '<span class="form_plus">+</span> ' +
      '<span class="form_minus">-</span> ' +
      "</th>" +
      "</tr>";

    target_forms.forEach(target_form =>
      target_form.insertAdjacentHTML("afterend", add_form_html)
    );
   
  }
  plus_forms.forEach(plus_form =>
    plus_form.addEventListener("click", add_form)
  );

この方法ですと、最初からHTMLに記載してあるコードの＋を押せば新たにHTMLを生成して追加してくれるのですが、新しく生成されたHTMLの＋を押しても新たなフォームを生成してくれません。

どうすれば上手く実装出来るでしょうか？

Comments

[m.ts10806]

nameないですが、どのように送信して、受け取る設計ですか？

[mika_yamano]

モーダルでこのコードを表示して、入力された値をrailsのフォームに入れてFPOSTしようと思っています。
もっといい方法があるのかもしれませんが、思いつきませんでした。

[m.ts10806]

>railsのフォームに

その前提は書いてあった方が良いかと思います。詳しくはないですがフレームワーク利用ならフレームワークのお作法に則る必要があるでしょうし。
タグを追加、質問に追記してください

Answer 1

クリックハンドラーを設定する対象を、より広い範囲にすると、分かりやすく書けます。以下は、table 全体に、クリックハンドラーを設定する例です。

document.addEventListener('DOMContentLoaded', function() {

  
  let count = 0;
  
  const addFormHtml = () =>
      '<tr class="add_form">' + 
      `<td>${++ count}</td>` +
      "<th>" +
      '<input type="text" placeholder="材料" class="material" /> ' +
      '<input type="text" placeholder="分量" class="material" /> ' +
      '<span class="form_plus">+</span> ' +
      '<span class="form_minus">-</span> ' +
      "</th>" +
      "</tr>";

  
  function handleTableClick({ target }) {
    if (target.classList.contains('form_plus')) {
      target.closest('.add_form').insertAdjacentHTML("afterend", addFormHtml());
    }
  }
  
  const table = document.querySelector('table');
  table.addEventListener("click", handleTableClick);

  
});

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/mdVJNEY?editors=1010

なお、上記では、どの＋がクリックされても、その＋を含む行のすぐ下に行が追加されることを確認できるようにするために、各行の先頭に何番目に追加された行かが分かるように、通し番号のセルを追加しています。

Comments

[mika_yamano]

これですこの動きです！
こういう書き方があったんですね、どうやってぐぐっていいかもわからなかったので本当に助かりました、ありがとうございます！

[jun68ykt]

どういたしまして????
> これですこの動きです！
とのことでよかったです????

このご質問の例のように、
「クリックハンドラーをどの要素に設定すると（後々まで）楽か？」
というのは、けっこう考え処だったりします。

[mika_yamano]

バックエンドばかりだったので、中々にjavascript難しいですね????
でも動きがあるのでとても面白くもあります✨
今回は本当にありがとうございました????

[jun68ykt]

????????

Answer 2

イベント移譲をするのがいいかと思いました。
サンプル

  document.addEventListener("click", function(e){
    if ( e.target.closest(".form_plus") ) add_form()
  })

イベントのバブリングとキャプチャリング | イベントの紹介 - ウェブ開発を学ぶ | MDN

Element.closest() - Web API | MDN

Comments

[mika_yamano]

回答ありがとうございます。
こういう書き方もあるのですね、とても参考になりましたありがとうございます！