web-dev-qa-db-ja.com

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();

これは機能し、指定されたリスト項目を削除しますが、「動的」ではありません。

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

javascriptjqueryparent
58
Noob

.closest() メソッドを使用するだけです：$(this).closest('.li').remove();
現在の要素から開始し、チェーンを登って一致する要素を探し、見つかったらすぐに停止します。

.parent() は、要素のdirect親、つまりdiv.msg-modificationと一致しない.liのみにアクセスします。したがって、探している要素には到達しません。

.closest() （現在の要素をチェックしてからチェーンを登る）以外の別の解決策は .parents() を使用することです-ただし、これはすぐには停止しないという警告があります一致する要素を見つけるため（現在の要素はチェックせず、only親要素）あなたの場合、それは本当に重要ではありませんが、あなたがやろうとしていることのために.closest()が最も適切な方法です。

別の重要なこと：

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

107
ThiefMaster

nwrap（） の使用はどうですか

<div class="parent">
<p class="child">
</p>
</div>

使用後-$(".child").unwrap()-なります;

<p class="child">
</p>
18
dav

parents()の代わりにparent()を使用します。

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

親を削除：

$(document).on("click", ".remove", function() {
       $(this).parent().remove(); 
});

すべての親を削除します。

$(document).on("click", ".remove", function() { 
       $(this).parents().remove();
});
7
Andrea_dev

これも使用できます：

$(this)[0].parentNode.remove();
0
Andres Paul
$('#' + catId).parent().remove('.subcatBtns');
0
Itisha-systematix