ボタンを押すと要素が消える仕様にしたい

Question

<div class="choicesContainer">
  <input type="text" maxlength="30" class="choice">
  <input type="text" maxlength="30" class="choice">
</div>
<div class="add">追加</div>

(function() {
  'use strict';

  var add = document.getElementsByClassName('add');
  var choicesContainer = document.getElementsByClassName('choicesContainer');

  add[0].addEventListener('click', function() {
    var choiceFrame = document.createElement('div');
    var delBtn = document.createElement('div');
    var input = document.createElement('input');


    choiceFrame.classList.add('choiceFrame');
    delBtn.classList.add('delBtn');
    input.setAttribute('type', 'text');
    input.setAttribute('maxlength', '30');
    input.classList.add('choice');

    delBtn.innerHTML = '×';
    choiceFrame.appendChild(input);
    choiceFrame.appendChild(delBtn);
    choicesContainer[0].appendChild(choiceFrame);


    var choiceBox = document.getElementsByClassName('choiceFrame');
    var del = document.getElementsByClassName('delBtn');

    for(var i = 0; i < del.length; i++) {
      del[i].addEventListener('click', function() {
        choiceBox[i].remove();
      })
    }
  })
})();

「追加」を押すと、inputタグと×印が両方現れます。×印を押すと、×印も消え、さらに一緒に出現してきたinputタグも同時に消えるようにしたいのですが、うまくいきません。
どのように改善すればよいでしょうか？

Comments

[m.ts10806]

「うまくいきません」とは何が起きているのでしょうか？実際に起きた現象・問題・エラーなどありましたら追記してください。

[ryoo_chksl]

「追加」をx回押したときにあらわれるバツ印をXバツ、inputをXinputとします。1バツを押すと2inputが消えたり、２inputと4inputが同時に消えたり、問題はいろいろと生じています。生じる問題の傾向性が自分もよく分かっていないので、言語化が難しいです。お手数ですが、コードをテキストエディタにコピペして実際にどういう動きになるのかを見ていただいた方が分かりやすいかと思われます。

[m.ts10806]

質問は編集できるので追記してください。質問者さんが何をどこまで把握しているかは回答のために必要な情報ですが、こちらのコメント欄はデフォルト非表示で目につきにくいですし質問本文との連動性もとりづらくなるので

Answer 1

対応

削除ボタンのイベントリスナーの設定を次のように置き換えてください。

変更前

    // 以下８行を削除
    var choiceBox = document.getElementsByClassName('choiceFrame');
    var del = document.getElementsByClassName('delBtn');

    for(var i = 0; i < del.length; i++) {
      del[i].addEventListener('click', function() {
        choiceBox[i].remove();
      })
    }

変更後

    // この３行を追加
    delBtn.addEventListener('click', function() {
      choiceFrame.remove();
    });

説明

最後に行なっている処理は、削除ボタンにイベントリスナーを設定し直す処理だと思いますが、addEventListenerは同じイベントに対して異なるイベントリスナーを指定して複数回呼び出すと、上書きではなく追加になります。

今回のコードでは、追加のたびに無名関数を新しく生成している状態なので追加になります。
その結果、削除ボタンのクリックで複数のイベントリスナーが実行されます。

まず、既存の削除ボタンは変更せずに、新しく追加した削除ボタンにだけイベントリスナーを追加するようにします。

次に、削除する対象も新しく追加した要素(choiceFrame)として特定できているので、それに対してremove()を呼び出します。

補足

どこまでクロージャを知っているかで説明できる内容が変わるのですが、追加ボタンのイベントリスナーが外部関数となり、削除ボタンのイベントリスナーが内部関数となります。

内部関数である削除ボタンのイベントリスナーに対して、クロージャが作られます。

クロージャの機能によりスコープ内にあるchoiceFrame変数を束縛できます。

choiceFrame変数は、追加ボタンのイベントリスナーのローカル変数なので、追加処理のたびに新しく生成され、名前は同じですが削除ボタンのイベントリスナーは異なるchoiceFrame変数を束縛している状態になります。

なので、delBtnと合わせて生成したchoiceFrameを対応付けられるので、変更後のようなコードになります。

説明難しいですノω≦)

詳しくは、developer.mozilla.orgの関数 - javascript/入れ子の関数とクロージャを参考に。

Comments

[StupidDog]

被っちゃったノω≦)

Answer 2

追加した要素だけ削除するようにすればいいので。

    delBtn.addEventListener('click', function(event) {
      choiceFrame.remove(); // event.target.parentNode.remove();
    }, { capture: false, once: true, passive: true });