1,105,534 Community Members

Remove first and last three child from UL

Member Avatar
sunwebsite
Light Poster
25 posts since Dec 2010
Reputation Points: 11 [?]
Q&As Helped to Solve: 7 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi
I want to remove the first <LI> item and last three <LI> item from <UL> list. How to write code in JQuery.

I need the below list

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
</ul>

as below result

<ul>
   <li>1</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
</ul>

I tried like

$("ul li:not(:first-child, eq(-2))").remove();

but does not give the clear result to me.

Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 

Your explanation of what you want says that you want to remove 1, 5, 6 and 7. However you say that your results are to keep 1, 5, 6, and 7. Can you clarify as to which you want?

Member Avatar
sunwebsite
Light Poster
25 posts since Dec 2010
Reputation Points: 11 [?]
Q&As Helped to Solve: 7 [?]
Skill Endorsements: 0 [?]
 
0
 

I given :not selector which will avoid 1,5,6 and 7 was my thought. Actually many li items will be in between 1 and 5. 1, 5, 6 and 7 element is constant. So I want to remove all elements except 1, 5, 6 and 7 that means to remove all elements between 1 and 5 element.

Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 

You don't need to do it in all one selector:

$("ul li:first-child").remove();

for(var i = 0; i < 3; i++){
    $("ul li:last-child").remove();
}

This is easy to read and easy to understand.

Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 

oops

Just realized that is the opposite of what you want. Give me a few minutes.

Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 
var length = ($('ul li').length() - 2);

for(var i = 2; i < length; i++){
    $('ul li:nth-child(2)').remove();
}
Member Avatar
sunwebsite
Light Poster
25 posts since Dec 2010
Reputation Points: 11 [?]
Q&As Helped to Solve: 7 [?]
Skill Endorsements: 0 [?]
 
0
 

Fine stbuchok..
Thanks for your help. But, Is there any way to achieve this without looping though the li. Any way first and last three element is constant.

Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 

You can try the gt and lt (great than and less than) selectors:

$('ul li:gt(0):lt(' + ($('ul li').length - 3) + ')').remove();

However this only works if the ('ul li') selector refers to one unordered list. If there are multiple unordered lists on the page this will not work.

I honestly think the best way is with the looping. It is easier to read and maintain.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: