CODEWITHSUNDEEP
javascriptjquery
user426795
user426795

Reputation: 11663

how to delete or hide a li

<li>ff<strong>foobar</strong><a class="icon-close" href="#."></a></li>
<li>ff<strong>foobar</strong><a class="icon-close" href="#."></a></li>
<li>ff<strong>foobar</strong><a class="icon-close" href="#."></a></li>
<li>ff<strong>foobar</strong><a class="icon-close" href="#."></a></li>
<li>ff<strong>foobar</strong><a class="icon-close" href="#."></a></li>
<li>ff<strong>foobar</strong><a class="icon-close" href="#."></a></li>
<li>ff<strong>foobar</strong><a class="icon-close" href="#."></a></li>

On clicking the a, the respective li should be deleted.

$(.close-icon).hide(); hides every thing.

Upvotes: 0

Views: 408

Answers (9)

Shaz
Shaz

Reputation: 15867

$(".close-icon").click(function() {
    $(this).closest("li").remove();
});

This will not only hide the element, it will also remove it from the page.

Upvotes: 3

S L
S L

Reputation: 14318

Do you mean this 

 $('.close-icon').click( function (){ $(this).hide(); });

For hiding the entire parent

 $('.close-icon').click( function (){ $(this).parent('li').hide(); });

Also change .close-icon to '.close-icon'

for removing replace hide() by remove()

Upvotes: 1

xkeshav
xkeshav

Reputation: 54022

try

hide:

$("a").click(function() {
  $(this).closest("li").hide(); 
 });

DEMO

remove :

 $("a").click(function() {
      $(this).closest("li").empty(); 
 });

OR 

$("a").click(function() {
      $(this).closest("li").remove(); 
   });

Reference

Upvotes: 2

Tim B James
Tim B James

Reputation: 20364

$("a.close-icon").click(function() {
  $(this).parent("li").remove();
  return false;
});

Upvotes: 0

KutePHP
KutePHP

Reputation: 2236

I have not tested, but code below should work, if I understood your requirement.

$(.close-icon).click(function(event){
event.preventDefault();
$(this).parent().remove(); //remove the parent OR 
   //$(this).parent().hide(); //hide the parent

 });

Upvotes: 0

JohnP
JohnP

Reputation: 50019

if you want to hide it 

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

If you want to delete it 

$('a.icon-close').click(function(){
   $(this).parent('li').remove();
});

The filtering 'li' in .parent() is not strictly necessary in this case.

Upvotes: 0

Blowsie
Blowsie

Reputation: 40535

Presuming you want the li to hide / remove on click of the icon 

 $('.close-icon').click(function(){
    $(this).parent('li').hide();
    });

or

$('.close-icon').click(function(){
$(this).parent('li').remove();
});

Upvotes: 0

Barry
Barry

Reputation: 2063

$(.icon-close).click( function() {
    $(this).parent().hide();
});

Upvotes: 1

Jeff
Jeff

Reputation: 21892

Should work, but haven't tested:

$("a.close-icon").click(function() {
  $(this).parent("li").hide();
});

Upvotes: 6

Related Questions