javascript - jQuery onclick で親要素を隠す

Question

jQueryでタグクリック<li>時にタグを非表示にしたい。<a>

<ul>
  <li>
    <a href="'>Something</a>
  </li>
  <li>
    <a href="'>Something</a>
  </li>
  <li>
    <a href="'>Something</a>
  </li>
</ul>

つまり、誰かが link( <a></a>) をクリックすると、その親<li>が非表示になります。

Answer 1

(function() {
  $("ul li a").click(function(e) {
    e.preventDefault();
    $(this).parent().hide();
  });
})(jQuery);

「1つの」jQuery関数も試してください

(function() {
  $("ul li a").one('click', function(e) {
    e.preventDefault();
    $(this).parent().hide();
  });
})(jQuery);

Answer 2

.clickでイベントを処理してから、 .parentメソッドと.hideメソッドを使用します。

$("a").click(function(){
    $(this).parent().hide(); // this is the link element that was clicked
})

上記のコードは、リンクがリスト要素 ( <li>) に直接含まれていることを前提としています。そうでない場合は、次の.parentようにセレクターをメソッドに渡すことができます。

$(this).parent("li").hide();

これにより、リンクの祖先が検索され、<li>.

false を返す

通常、タグをクリックする<a>と、ブラウザーはタグの href に移動します。したくない場合はreturn false;、クリック ハンドラーから行うか、 false: を返す href を追加します<a href="javascript:void(0)">Link</a>。これについては、この質問でさらに議論があります。

これを行うにはさまざまな方法があります

次の理由により、コードのバリエーションが必要になる場合があります。

• 親を非表示にしたくないページに他のリンクがある可能性があります。これが、「a」の代わりに「ul li a」をセレクターとして使用するのが理にかなっている理由です。これは、リスト内にあるリンクのみに一致します。
• .preventDefault()false を返す代わりに、イベント オブジェクトの を使用して、ブラウザーがアドレスを変更しないようにすることができます。
• リンクをクリックすると非表示になるため、.oneメソッドを使用することもできます。リンクをクリックすると、イベント ハンドラーが削除されます。後でもう一度リンクを表示する予定がある場合は、これを行わないでください。
• リストが動的である場合は、代わりに.onを使用できます。つまり、Javascript を使用してリンクを追加します。.click
• 一部の回答者は、自己呼び出し関数と呼ばれるものでコードをラップしています。次のようになります(function() { /* code */})(jQuery);。これは後でコードを構成するのに役立ちますが、初心者にはお勧めしません。基本的に、コード内の望ましくない副作用を回避するのに役立ち、.noConflictを使用できるようになります。

Answer 3

li親を非表示にし、ハイパーリンクをクリックするデフォルトのアクションを防止するこれを試してください。http://api.jquery.com/event.preventDefault/を参照してください。

$(function() {
    $("a").click(function(e) {
       e.preventDefault();
       $(this).parent().hide();
    });
});

Answer 4

を使用.parent()して、要素の親をターゲットにし、それ.hide()を非表示にすることができます。これらの関数の使用方法の詳細については、jQuery のドキュメントを参照してください。.preventDefault()また、ブラウザがリンクをたどらないようにするためにも使用する必要があります。

$(function() {
    $('a').click(function(e) {
        e.preventDefault();
        $(this).parent().hide();
    });
});

Answer 5

使用することを忘れないでくださいreturn false;

  $('a').click(function(){
      $(this).parent().hide();
      return false;
  });​

ライブデモ

Answer 6

$( "a" ).click( function(){
    $( this ).parent().hide();
    return false;
} );

実際の例はここにあります http://jsfiddle.net/shinyakoizumi/aQanZ/

Answer 7

$('a').click(function(){
    $(this).parent('li').hide();
});