jQueryで親要素を削除する方法

質問

私のjspには、いくつかのリストアイテムのタグがあります。各リスト項目は、deleteというリンク（"a"タグ）を含むいくつかの要素を内部に含んでいます。私が欲しいのは、私がリンクをクリックしたときにリストアイテム全体を削除することだけです。

以下は私のコードの構造です。

$("a").click(function(event) {
  event.preventDefault();
  $(this).parent('.li').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="191" class="li">
  <div class="text">Some text</div>
  <h4><a href="URL">Text</a></h4>
  <div class="details">
    <img src="URL_image.jpg">
    <span class="author">Some info</span>
    <div class="info"> Text
      <div class="msg-modification" display="inline" align="right">
        <a name="delete" id="191" href="#">Delete</a>
      </div>
    </div>
  </div>
</li>

しかし、これではうまくいきません。私はjQueryの初心者なので、例えばのようなことを試してみました。

$(this).remove();

これは、クリックされるとリンクが削除される仕組みです。

$("#221").remove();

これは動作し、示されたリスト項目を削除しますが、"dynamic" ではありません。

誰かが私にヒントを与えることができますか？

どのように解決するのですか？

単純に .closest() メソッドを使用します。 $(this).closest('.li').remove();

これは現在の要素から始まり、マッチする要素を探しながらチェーンを登っていき、見つかり次第停止します。

.parent() へのアクセスは に直接アクセスします。 の親要素、つまり div.msg-modification とは一致しませんが .li . そのため、探している要素に到達することはありません。

以外の解決策としては .closest() (現在の要素をチェックし、連鎖的に上昇する)以外の解決策としては .parents() - しかし、これには、マッチする要素を見つけたらすぐに停止するわけではない、という注意点があります (そして、現在の要素をチェックするわけではなく だけです。 の親要素をチェックします)。あなたの場合、それは本当に重要ではありませんが、あなたが行おうとしていることについては .closest() が最も適切な方法です。

もうひとつ大切なこと。

NEVER は、複数の要素に同じ ID を使用することはできません。許されませんし、デバッグが非常に困難な問題を引き起こします。また id="191" を削除し、クリックハンドラで ID にアクセスする必要がある場合は $(this).closest('.li').attr('id') . 実際には data-id="123" を使ってから .data('id') の代わりに .attr('id') でアクセスできるようになります (したがって、要素 ID は (データベース?) 行が持つ ID と同じである必要はありません)。