javascript jQuery onclick 隐藏其父元素

jQuery onclick hide its parent element

提问by Sunil Kumar

I want to hide <li>tag on <a>tag click with jQuery.

我想用 jQuery<li>在<a>标签点击时隐藏标签。

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

In other words if someone clicks on link(<a></a>) its parent <li>gets hidden.

换句话说，如果有人点击link( <a></a>)，它的父节点<li>就会被隐藏。

回答by Marian Zburlea

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

also try the "one" jQuery function

还可以尝试“一个”jQuery 函数

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

回答by Matt Zeunert

Handle the event with .clickand then use the .parentand .hidemethods.

处理该事件。点击，然后使用.parent和.hide方法。

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

The code above assumes that the link is contained directly in the list element (<li>). If that isn't the case you can pass a selector to the .parentmethod like this:

上面的代码假定链接直接包含在列表元素 ( <li>) 中。如果不是这种情况，您可以将选择器传递给.parent方法，如下所示：

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

This will find go through the ancestors of your link and return the one that is a <li>.

这将找到通过您的链接的祖先并返回一个<li>.

Returning false

返回错误

Normally, when you click an <a>tag the browser will navigate to the href of the tag. If you don't want that you can either return false;from the click handler or add an href that returns false: <a href="javascript:void(0)">Link</a>. There's more discussion about this in this question.

通常，当您单击一个<a>标签时，浏览器将导航到该标签的 href。如果您不想这样做，您可以return false;从单击处理程序中或添加一个返回 false: 的 href <a href="javascript:void(0)">Link</a>。在这个问题中有更多关于这个的讨论。

There are many different ways to do this

有很多不同的方法可以做到这一点

You might need variations of the code because:

您可能需要代码的变体，因为：

• You probably have other links on the page that you don't want to hide the parent of. This is why it makes sense to use "ul li a" as the selector instead of "a" - it will only match the links that are inside a list
• You can use the .preventDefault()of the event object instead of returning false to prevent the browser from changing the address
• Since the link will be hidden after being clicked you can also use the .onemethod - it will remove the event handler after the link has been clicked. Don't do this if you plan to show the link again later on.
• You can use .oninstead of .clickif your list is dynamic, i.e. you will use Javascript to add links to it
• Some answerers have wrapped the code in what's called a self-invoking function. It looks like this: (function() { /* code */})(jQuery);. I would not recommend this for beginners, although it will help you structure your code later on. Basically it helps you avoid unwanted side-effects in your code and allows you to use .noConflict.

• 您可能在页面上有其他不想隐藏其父链接的链接。这就是为什么使用 "ul li a" 作为选择器而不是 "a" 是有意义的 - 它只会匹配列表中的链接
• 您可以使用.preventDefault()事件对象的 ，而不是返回 false 来防止浏览器更改地址
• 由于链接将在被点击后隐藏，您还可以使用.one方法 - 它会在链接被点击后删除事件处理程序。如果您打算稍后再次显示该链接，请不要这样做。
• 如果您的列表是动态的，您可以使用.on而不是.click，即您将使用 Javascript 向其添加链接
• 一些回答者将代码封装在所谓的自调用函数中。它看起来像这样：(function() { /* code */})(jQuery);。我不会向初学者推荐这个，尽管它会帮助你以后构建你的代码。基本上它可以帮助您避免代码中出现不需要的副作用，并允许您使用.noConflict。

回答by cspolton

Try this which hides the parents liand prevents the default action of clicking on the hyperlink. See http://api.jquery.com/event.preventDefault/:

试试这个隐藏父级li并防止点击超链接的默认操作。请参阅http://api.jquery.com/event.preventDefault/：

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

回答by nbrooks

You can use .parent()to target the element's parent, and .hide()to hide it. See the jQuery documentation for details on these functions' uses. You should also use .preventDefault()to prevent the browser from following the link.

您可以使用.parent()来定位元素的父元素并.hide()隐藏它。有关这些函数使用的详细信息，请参阅 jQuery 文档。您还应该使用.preventDefault()防止浏览器跟随链接。

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

回答by rahul

don't forget to use return false;

不要忘记使用 return false;

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

Live Demo

现场演示

回答by Shinya Koizumi

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

working example can be found here http://jsfiddle.net/shinyakoizumi/aQanZ/

可以在这里找到工作示例 http://jsfiddle.net/shinyakoizumi/aQanZ/

回答by el vis

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