cloneNodeで複製された要素の中からクリックされた要素を削除する

Question

質問内容

JavaScriptです。
「cloneNodeで複製された要素の中からクリックされた要素を削除する」という処理をしたいのですが、クリックした要素以外の要素も削除されてしまいます。

要素を５つに複製して３つ目をクリックしたところ、３つ目の要素・４つ目の要素・５つ目の要素が削除されました。
なぜクリックした要素の他に、それ以降の要素まで削除されてしまうのかを知りたいです。また、修正例をいただけますと幸いです。
回答よろしくお願いいたします。

該当のソースコード

    <input type="button" value="複製" id="btn">
    <ul id="ul">
        <li class="li">リスト</li>
    </ul>

'use strict';

const btn = document.getElementById("btn");
const ul = document.getElementById("ul");
const li = document.getElementsByClassName("li");

btn.addEventListener("click", function(){
    const clone = li[0].cloneNode(true);
    ul.appendChild(clone);
    let count = ul.children.length;

    for(let i=0; i<count; i++){
        li[i].addEventListener("click", function(){
            li[i].remove();
        });
    }
});

Answer 1

現在のコードだと複製全部にかかるので「イベントが発生した自身」を明示する必要があります。

        li[i].addEventListener("click", function(e){
            e.currentTarget.remove();
        });

Event.currentTarget

Comments

[programming_div]

回答、ありがとうございます。
記載いただいたコードで想定した通りの処理が行われました。

詳細についてもう少しお伺いしたいのですが
《私のコードの場合》li[2]をクリックした際、li[2]を削除する。
《提示いただいたコードの場合》li[2]をクリックした際、イベントが発生した自身(=li[2])を削除する。
と、認識しております。
この認識だと双方とも同じ処理が行われるように思うのですが、なぜ異なる処理が行われてしまうのでしょうか。

[m.ts10806]

addEventListenerの中に
console.log(li[i])
を入れてみると分かります。
forの中に入れてしまっているので全てのliに対して削除が当てられてしまいます。
li[i]は「自身」ではなく「li全部」になってしまうのです。

[programming_div]

とても参考になりました。
ご回答いただき、ありがとうございました。