I have list of this kind

<ul>
<li><div class="pname">Name1</div><div class="pid">ID1</div>...</li>
<li><div class="pname">Name2</div><div class="pid">ID2</div>...</li>
<li><div class="pname">Name3</div><div class="pid">ID3</div>...</li>
...
</ul>

If I click on any of the list item, rest all other list items should be removed. Can anyone suggest how I could do this?

I have list of this kind

<ul>
<li><div class="pname">Name1</div><div class="pid">ID1</div>...</li>
<li><div class="pname">Name2</div><div class="pid">ID2</div>...</li>
<li><div class="pname">Name3</div><div class="pid">ID3</div>...</li>
...
</ul>

If I click on any of the list item, rest all other list items should be removed. Can anyone suggest how I could do this?

• javascript
• jquery

Share Improve this question Follow asked Jun 26, 2012 at 21:53 KrishhKrishh 4,23166 gold badges4343 silver badges5252 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

Assuming this is the clicked li element:

$(this).siblings('li').not(this).remove();

If the click handler is bound to something inside the list item:

$(this).closest('li').siblings('li').not($(this).parents()).remove();

You can simply replace the ul contents with the clicked item:

$('ul li').click(function(ev){
    $(this).closest('ul').html($(this));
});​

See demo

jQuery solution...

$('li').click(function() {
    $(this).siblings().remove();
});