【javascript】動的に追加された兄弟関係の要素の中から、クリックされた要素の取得方法

Question

動的に後から追加された兄弟関係を持つ要素の中から、クリックされた対象の要素の親要素を取得する方法を考えていましたが煮詰まってしまいました。。。

タグの追加機能を実装しようと、javascript縛りでコードを書いています。
タグを追加するところまでは実装できたのですが、追加された状態から任意のタグを削除できるようにしようとしているところで、削除したい要素を取得できずにおります。

※以下2019/4/26「やりたい事」追記

---

◆やりたい事

入力フォームから追加されたタグ内にあるXアイコンをクリックすると、その親要素（タグ全体）を取得し、削除する。

---

◆試した事

イベントリスナーの対象となる要素をタグの親要素(let display)としています。その上でコンソールへ以下のパターンで取得を試みてみました。

function deleteTag(){
    console.log(this); //これで一旦取得を確認
    console.log(this.firstElementChild); //取得はできるが常に最初の要素を取得してしまうため、任意の要素を削除する事はできない。lastElementChildも同様。
    console.log(this.children); //これで配列として兄弟要素を管理して、そこからクリックされた要素を検索してremove??

};

display.addEventListener('click', deleteTag, false);

以下現状のhtmlファイルの表示部分抜粋とjsファイルです。

• htmlのコメントアウトしてある部分が実際に動的に追加されていく要素となります。
• 今回アイコンはfontawesomeを採用しています。

GitHubにも以下と同じ状態のコードを公開しております。
GitHubでコードを見る

<section class="main_wrapper">
	<h2>タグ</h2>
	<label><input type="text" data-js="input_tag_form" placeholder="タグを入力:スペース区切りで複数追加できます"></label>
	<button type="button" data-js="add_tag_button">追加</button>
</section>
<section class="display" data-js="display_tags_area">
	<!-- <div class="tag_body">
	          <i class="fas fa-times-circle" data-js="delete_tag"></i>
	          <span>タグネーム</span>
	     </div> -->
</section>

let input = document.querySelector('[data-js="input_tag_form"]');
let button = document.querySelector('[data-js="add_tag_button"]');
let display = document.querySelector('[data-js="display_tags_area"]');
let del_icon = document.querySelector('[data-js="delete_tag"]');
let tags_arr = [];
function divideSpace(input){
	return input.trim().split(/[\s ]+/);
};

//追加ボタンが押下された時の処理
button.addEventListener('click', function(){


	let divided_tag = divideSpace(input.value);
	let element = '';
	let regex = /^[ \s\r\n\t]*$/;


	for( let i=0; i<divided_tag.length; i++ ){
		if( divided_tag[i] === divided_tag[i+1] ){continue;}
		else if( divided_tag[i].match(regex) ){
			alert('スペースのみで追加はできません');
			continue;
		}else{
			if( tags_arr.indexOf(divided_tag[i]) === -1 ){
				element = 	`<div class="tag_body">
							<i class="fas fa-times-circle" data-js="delete_tag"></i>
							<span>${divided_tag[i]}</span>
							</div>`;
				display.innerHTML += element;
				// input.value = '';
				tags_arr.push(divided_tag[i]);
				// console.log(tags_arr);
			} else {
				alert(`「${divided_tag[i]}」は既に存在します`);
				// input.value = '';
			};
		};
	};
	input.value = '';
});

function deleteTag(){
    console.log(this); //thisから辿って削除したい要素を一旦コンソールに出力しようとしています。
};

//タグ内のXが押下されたときの処理
	display.addEventListener('click', deleteTag, false);

以上です。
ご指摘アドバイス等ありましたら遠慮なく仰ってください。
よろしくお願いいたします。

Comments

[yambejp]

結果何を得たいのでしょうか？
仮にaaaと入力して追加した場合aaaをクリックしたら
どこを返してほしいのでしょうか？

[JunTakizawa]

ご連絡ありがとうございます！！

すいません。やりたい事の情報の記述してませんでした。
実際にはaaaではなく、その前にある<i></i>タグをクリックすると、そのaaaタグの<div class="tag_body"></>要素を返して欲しいです。

<i></i>がクリックされたら、その親要素である<div class="tag_body"></div>要素を削除したいです。
aaaと入力するとaaaのタグができて、そのタグの左にXのアイコンがあって、そこをクリックするとaaaタグが消えるといった感じです。

Answer 1

function deleteTag(e){
    console.log(e.target); 
};

であればクリックしたHTML要素になります
その親要素ならe.target.parentNode

追記

さかのぼった.tag_bodyまで消したいならこうです

function deleteTag(e){
  var tag=e.target.closest('.tag_body');
  tag.parentNode.removeChild(tag);
}

.closestはIEでは動作しないので、IE対応のために適当なpollyfillを用意してください