【ES6】複数イベントリスナが登録されるせいで、削除時にイベントが複数回発生するのをどうにかしたい

Question

標題の通り、クリックしたら動的に増える（ユーザー動作によって増える）要素に対して、増加時にイベントを追加しているのですが、
その追加したものを削除する際にイベントが複数回発生してしまいます。

原因はわかっているのですが、解決方法がわからず
何卒よろしくお願い致します

ためしてみたこと

・デリゲート
・removeEventlistener
┗ 増加する要素のラッパーに対して、クリックイベントを付与してみたり
addEventする前に、イベント自体をremoveしてみたがうまくいかず

コードについて

具体的なコードを提示できないのですが、以下のような作りになっています

function 削除関数() {
・生成関数で生成された要素数に応じて、for文でaddEventListener('click');
・クリックされた要素のindex番号を取得、対象の要素を削除
}

function 生成関数() {
・ユーザー動作に応じて、動的に要素を増やす関数
・削除関数を登録しておく（動的に追加された要素のイベントを有効にするため）
⬆︎ 生成用関数の中で、削除関数が記述されているのは、なんだかよくない気もしています。
}

原因（まとめ）

原因としては、登録時に複数イベントが登録されてしまっていること
→ for文で回しているため、例えば３つ要素がある時は以下のようになっている
「１番目の要素（3イベント）、２番目の要素（２イベント）、３番目の要素（１イベント）」

お手数おかけしますが、何卒よろしくお願い致します。

Answer 1

イベントのバブリングで解決できます。

具体的なコードを提示できない

CODEPEN こんな感じで文書断片を作って、イベントの挙動をテストすれば開示できますよ。

Comments

[decteckaaaaaaaa]

ありがとうございます！こちらもありですね！

Answer 2

増加時にイベントを追加している

親要素にイベントをつけて、セレクタで合致する場合だけ
反応するようにつくればよいでしょう

Comments

[yambejp]

あとは具体的な挙動がわかるようなサンプルを提示ください

[decteckaaaaaaaa]

ご回答いただきありがとうございます。
具体的なコード公開できずすみません。

> 親要素にイベントをつけて、セレクタで合致する場合だけ
> 反応するようにつくればよいでしょう
→ デリゲートという事でしょうか？
　自分でも色々調べてみて実際やってみてもうまくいかず...

[yambejp]

たとえばこんな感じ
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#add').addEventListener('click',()=>{
var del=Object.assign(document.createElement('input'),{type:"button",value:"del",className:"del"});
document.querySelector('#hoge').appendChild(del);
});
document.querySelector('#hoge').addEventListener('click',e=>{
var n=e.target;
if(n.classList.contains('del')){
n.parentNode.removeChild(n);
}
});
});
</script>
<input type="button" id="add" value="add">
<div id="hoge">
</div>

[decteckaaaaaaaa]

ありがとうございます！
なるほど... 少し関数に固執しすぎていたのも原因でした。
こちらで解決しました

Answer 3

コードがご提示いただけないので隔靴掻痒の感がありますが。

→ for文で回しているため、例えば３つ要素がある時は以下のようになっている
「１番目の要素（3イベント）、２番目の要素（２イベント）、３番目の要素（１イベント）」

for文で回さなければいいのではないかと思いました。
つまり、生成された要素に生成されたときだけイベントを設定すればいいのでは。

Comments

[decteckaaaaaaaa]

ご回答いただきありがとうございます！

> for文で回さなければいいのではないかと思いました。
> つまり、生成された要素に生成されたときだけイベントを設定すればいいのでは。

動的に増える且つ削除する際に、何番目の要素かindex検索しなければならないため、
for文で回していました。
動的に増えるイベントを一つ一つにつけるとなると...どういった方法があるのでしょうか？

[Lhankor_Mhy]

具体的なコードがないとわかりにくいかもしれませんが、参照を持っておけばいいと思います。

つまり、要素が生成された時点では、生成された要素＝消すべき要素の参照を持っているのですから、クロージャなどで参照を持ったままイベントを設定すればいいのではないでしょうか？

[decteckaaaaaaaa]

なるほど...
今回は別方法で実装になりましたが調べてみます！