jsで動的要素に対してのclickイベント設定について

前提・実現したいこと

動的要素に対しての正しいclickイベント設定

<li>以下が動的要素で<ul>は静的です。動的要素に対してのイベント設定なのでonメソッドを使用して第二引数に動的要素を指定しています。 <span>をclickする事でイベントが発生した<span>とその親の<li>だけを削除したいです。

発生している問題・エラーメッセージ

<ul>をclickした時に<ul>にもイベントが発生してしまい消えてしまう。

該当のソースコード

HTML
1<!--動的要素生成後-->
2<ul class="js-myself-tag-list">
3 <li class="profile-edit-add-tag-myself-list-item">
4  <span class="profile-edit-add-tag-myself-list-item-delete">
5  </span>
6 </li>
7</ul>

JavaScript
1ソースコード
2$(function () {
3 var $myselfTagList = $('.js-myself-tag-list');
4 var $myselfTagListItemDelete = $myselfTagListItem.find('.profile-edit-add-tag-myself-list-item-delete');
5
6 $myselfTagList.on('click', $myselfTagListItemDelete, function (e) {
7 var $eMyselfTagListItem = $(e.target).parent();
8
9 $eMyselfTagListItem.remove();
10 e.stopPropagation();
11 });
12});

試したこと

https://qiita.com/negi/items/6ec0d3cedba499eac81a
https://qiita.com/sansaisoba/items/7099e63c4badb3b51b74
の記事を参考にして第二引数に動的要素を設定しました。

バブリングだと思いhttps://qiita.com/madobon/items/9a93ea830f093b1dca4f
の記事を参考にしてe.stopPropagation();を試しました。

補足情報（FW/ツールのバージョンなど）

他に動的要素に対してのイベントの設定の仕方や<ul>にイベント発生させない方法があれば教えて欲しいです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

これで動くと思います

html
1<ul class="js-myself-tag-list">
2 <li class="profile-edit-add-tag-myself-list-item">
3  <span class="profile-edit-add-tag-myself-list-item-delete">
4  </span>
5 </li>
6<ul>←</ul>の間違いです。

javascript
1$(function () {
2  var $myselfTagList = $('.js-myself-tag-list');
3
4  $myselfTagList.on('click', '.profile-edit-add-tag-myself-list-item-delete', function (e) {
5    $(e.target).parent().remove();
6  });
7});