質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,238

ryoo_chksl

score 66

<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タグも同時に消えるようにしたいのですが、うまくいきません。
どのように改善すればよいでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/11/17 22:09

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

    キャンセル

  • ryoo_chksl

    2018/11/17 22:55

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

    キャンセル

  • m.ts10806

    2018/11/17 22:57

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

    キャンセル

回答 2

checkベストアンサー

0

 対応

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

変更前

    // 以下8行を削除
    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();
      })
    }

変更後

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

 説明

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

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

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

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

 補足

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

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

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

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

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

説明難しいですノω≦)

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/19 13:26

    被っちゃったノω≦)

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる