jQuery onclick скрыть свой родительский элемент

Question

Я хочу скрыть <li> тег на <a> тег click с jQuery.

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

Другими словами, если кто-то нажимает на ссылку (<a></a>) его родитель <li> получает скрыт.

Answer 1

Обработайте событие .click, а затем используйте методы .parent и .hide.

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

Код выше предполагает, что ссылка содержится непосредственно в элементе списка (<li>). Если это не так, вы можете передать селектор в .parent метод как это:

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

Найдет пройти через предок вашей ссылки и вернуть тот, который является <li>.

Возвращение ложных

Обычно, когда вы щелкните <a> тег, браузер будет перемещаться к HREF тега. Если вы не хотите, чтобы вы могли либо return false; из обработчика кликов, либо добавить href, который возвращает false: <a href="javascript:void(0)">Link</a>. Об этом больше обсуждают in this question.

Есть много различных способов сделать это

Вам может потребоваться изменения кода, так как:

• Вы, вероятно, есть другие ссылки на страницы, которые вы не хотите, чтобы скрыть родитель. Вот почему имеет смысл использовать «ul li a» в качестве селектора вместо «a» - он будет соответствовать только ссылкам, находящимся внутри списка.
• Вы можете использовать объект события .preventDefault() вместо того, чтобы возвращать false чтобы браузер не менял адрес
• Поскольку ссылка будет скрыта после нажатия, вы также можете использовать метод .one - он удалит обработчик событий после того, как была нажата ссылка. Не делайте этого, если вы планируете снова показать ссылку позже.
• Вы можете использовать .on вместо .click если ваш список является динамическим, то есть вы будете использовать JavaScript, чтобы добавить ссылки на него
• Некоторые обернули отвечающий код в то, что называется сама-вызовом функция. Это выглядит так: (function() { /* code */})(jQuery);. Я бы не рекомендовал это для новичков, хотя это поможет вам структурировать ваш код позже. В основном это помогает избежать нежелательных побочных эффектов в коде и позволяет использовать .noConflict.

Answer 2

Попробуйте это, спрятав родителей li и предотвращая действие по умолчанию нажатия на гиперссылку.См http://api.jquery.com/event.preventDefault/:

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

Answer 3

$('a').click(function(){ 
    $(this).parent('li').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; 
    });​ 

Live Demo

Answer 6

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

также попробовать "один" функцию JQuery

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

Answer 7

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

рабочий пример можно найти здесь http://jsfiddle.net/shinyakoizumi/aQanZ/