ボタンクリック時に該当箇所削除

Question

前提・実現したいこと

＋ボタンで要素を追加し、cardクラスを出力
カード内にある削除という名のbuttonタグが押されます。その際に追加していたカードが削除されるようにしたいです。

該当のソースコード

      
            <div class="tile is-ancestor back">
                <div class="tile is-parent board">
                    <div class="tile is-child">
                        <div class="drag-area">
                            <div class="nameboard side">
                                <div class="button is-primary is-rounded" onclick="add();">＋</div>
                                <div class="name">　No nameさん</div>
                                <div class="no_name">
                                    <span style="display: none;"></span>
                                </div>
                            </div>
                            <div class="back" id="Noname_card">
                            </div>
                            

                        </div>
                    </div>
                </div>

var add = () => {

    let add_ele = document.getElementById("Noname_card");

    const div_element = document.createElement("div");

    div_element.innerHTML = `<div class="card">
    <div class="no_name">
        <span style="display: none;"></span>
    </div>
    <div class="name">
        <p>　タスク</p>
    </div>
    <div class="button is-primary" onclick="del();">削除</div>
</div>`;

    add_ele.appendChild(div_element.childNodes[0]);

}

var del = () => {

    let card_dele = document.getElementById("Noname_card");


    

    }

}

試したこと

var add = () => {

    let add_ele = document.getElementById("Noname_card");

    const div_element = document.createElement("div");

    div_element.innerHTML = `<div class="card">
    <div class="no_name">
        <span style="display: none;"></span>
    </div>
    <div class="name">
        <p>　タスク</p>
    </div>
    <div class="button is-primary" onclick="del();">削除</div>
</div>`;

    add_ele.appendChild(div_element.childNodes[0]);
    add_ele.addEventListener("click", del, false);

}

var del = () => {
    let card_dele = document.getElementById("Noname_card");
    card_dele.removeChild(this.addele.childNodes[0]);
}

Comments

[gentaro]

> if (card_dele.childNodes[i].onclick == card_dele.childNodes[i]) {

絶対にfalseになりますが、このコードの意図は何でしょうか。

[united.reds.30]

出力されないコードをそのままコピペしたため、このコードが残っていました。削除します。

[m.ts10806]

buttonが押されるのではなくカードが押されるのでしょうか。

[united.reds.30]

カード内にある削除という名のbuttonタグが押されます。その際に追加していたカードが削除されるようにしたいです。（日本語下手ですみません...）

[m.ts10806]

その説明で充分理解できますので、質問本文を更新しておいてください。

Answer 1

カード内にある削除という名のbuttonタグが押されます。その際に追加していたカードが削除されるようにしたい

要は「動的に追加された要素に対するイベント付与」がキーワードですね。
下記の質問が参考になると思います。

• teratail:動的に追加した要素にaddEventListnerを設定する方法

「要素が画面上に追加されてからその要素に対してイベントを付与する」ということになります。

あとは付与したイベントのthisが押したボタン自身となるので
そこから親要素を辿ってcardクラスを見つけ、削除すると良いです。

コード追記を受けて：

もともと「削除ボタン」にonclickがついているので改めてaddEventListenerする必要なかったですね。失礼しました。
呼び出しているところと関数定義のところ、引数を追加してください。

<div class="button is-primary" onclick="del(this);">削除</div>

var del = (btn) => {

これで「そのボタン自身」が渡ります。

あとは「そのボタンが所属するcard」を見つけるだけですが、
これは結構色んなやり方があると思います。

先に書いた「parentNode」でも良いですし、「Noname_cardのn番目のcard」でも良いと思います。
buttonクラスがこの削除ボタンにしか付与されないなら「Noname_card内でn番目のbuttonクラス」を求めることは可能なはずですので。

別案：

cardに連番でもidをつけてonclickでそのidを渡し、それをもってcardを削除
（たぶんこれが一番簡単・・）

Comments

[united.reds.30]

説明ありがとうございます。要素が画面上に追加されてからその要素に対してイベントに対してthisを使用するのですか？そこのとこをもう少し詳しくお伺いしたいです。

[m.ts10806]

>要素が画面上に追加されてからその要素に対してイベントに対してthisを使用するのですか？
ちょっと認識が違うと思います。
追加した要素にイベントを付与するわけですから、そのイベントで呼び出されるthisは必ず「イベントが発生した要素」になります。

[united.reds.30]

回答ありがとうございます。
追加したものに、イベントを付与させる。そのイベントをthisで呼び出すと、おのずと削除ボタンを押されたカードが削除されるという順番なんですね。

[m.ts10806]

そのイベントのthis＝押した削除ボタン
です。そこからは「その削除ボタンが所属するcard」を辿る必要があります（どうやって辿るかはリンクつけてます）

[united.reds.30]

回答ありがとうございます。リンクを見たのですが、まだわかりません。面倒だとは思いますが、コードを書いて説明してくださるとありがたいです<(_ _)>

[m.ts10806]

まず書いてみてください。ここで他人が書いたコードで他人の説明を受けたところで「わかりません」から脱することはできないと思います。
それに回答に提示した質問に流用可能なコードはあります。

[m.ts10806]

面倒だからコードを回答につけないわけではなく、質問に提示されたコードから「提示した内容をヒントに解決すると思っているから」書かない　です。
自身が提示されたコードをきちんと理解できていれば、ヒントをもとに組み込むことは十分可能と思ってます。

[united.reds.30]

ありがとうございます。今、自分のコードとリンクから書いてみました。

削除ボタンを押すとdel関数は反応するのですがthisの指定が分からず上手くいかないです。

[m.ts10806]

これも「試したこと」ですし、コメント欄ではマークダウン使えませんので
「回答を受けてやってみたこと」としてコードを”追記”願います

[m.ts10806]

あれ？というかよく見たらボタンにonclickつけてますね。addEventListenerの必要ないですね。

[m.ts10806]

add_eleはそもそもカード自体なので「ボタンに」でしたらもっと簡単です。

[united.reds.30]

thisをなにと付けるのかがわからないです。

[m.ts10806]

onclickがあることで少し方向性変わりました。（見落としてましたすみません）
あと細かくて申し訳ないですが、最初のコードと同じくコードはマークダウンでお願いします。

[united.reds.30]

いえいえ。回答ありがとうございます。マークダウン修正します。

Answer 2

<script>
window.addEventListener('DOMContentLoaded',()=>{
  document.querySelector('#add').addEventListener('click',add)
  document.querySelector('#Noname_card').addEventListener('click',e=>{
    var t=e.target;
    if(t.classList.contains("del")) del(t);
  });
});
const add =()=>{
  const e1 = document.querySelector('#Noname_card');
  const e2 = document.createElement('body');
  e2.innerHTML = `<div class="card">
    <div class="no_name">
        <span style="display: none;"></span>
    </div>
    <div class="name">
        <p>　タスク</p>
    </div>
    <div class="button is-primary del">削除</div>
</div>`;
  e1.appendChild(e2.querySelector('div'));
}
const del =ele=>{
  var e=ele.closest('.card');
  e.parentNode.removeChild(e);
}
</script>

<div class="tile is-ancestor back">
<div class="tile is-parent board">
<div class="tile is-child">
<div class="drag-area">
<div class="nameboard side">
<div class="button is-primary is-rounded" id="add">＋</div>
<div class="name">　No nameさん</div>
<div class="no_name">
<span style="display: none;"></span>
</div>
</div>
<div class="back" id="Noname_card" class="test">
</div>
</div>
</div>
</div>