ボタンを押すと要素が消える仕様にしたい
解決済
回答 2
投稿
- 評価
- クリップ 2
- VIEW 3,672
<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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+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/入れ子の関数とクロージャを参考に。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
追加した要素だけ削除するようにすればいいので。
delBtn.addEventListener('click', function(event) {
choiceFrame.remove(); // event.target.parentNode.remove();
}, { capture: false, once: true, passive: true });投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
m.ts10806
2018/11/17 22:09
「うまくいきません」とは何が起きているのでしょうか？実際に起きた現象・問題・エラーなどありましたら追記してください。
ryoo_chksl
2018/11/17 22:55
「追加」をx回押したときにあらわれるバツ印をXバツ、inputをXinputとします。1バツを押すと2inputが消えたり、２inputと4inputが同時に消えたり、問題はいろいろと生じています。生じる問題の傾向性が自分もよく分かっていないので、言語化が難しいです。お手数ですが、コードをテキストエディタにコピペして実際にどういう動きになるのかを見ていただいた方が分かりやすいかと思われます。
m.ts10806
2018/11/17 22:57
質問は編集できるので追記してください。質問者さんが何をどこまで把握しているかは回答のために必要な情報ですが、こちらのコメント欄はデフォルト非表示で目につきにくいですし質問本文との連動性もとりづらくなるので