5 July 2012 0 Comments

remove first li element or append li element in ul li

How to remove first element from ul li options

When we are working with the <ul> and <li> then some time we need to remove the first element or we need to insert the <li> element in the current <ul> <li> list. some time you think that its a big job but actually its really very easy using jQuery. below is the option where you can insert the new <li> element and when you insert new <li> element then its remove the first <li> element, this way its maintain the current number of <li> elements.

 
Code 1
 
<div id="part2" class="content_flash_area" style="width:580px; height:518px; overflow-y: scroll;overflow-x:hidden;">
 <ul>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelancer</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelancer India</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">Freelance PHP Developer</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelance Programmer</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelance Developer</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelancer USA</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelancer UK</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">PHP Freelancer Australia</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">Wordpress Freelancer</a></li>
  <li><a href="http://www.freelancephpdevelopment.com">Freelance PHP Developer</a></li>
 </ul>
</div>
 
Code 2
 
<script type="text/javascript">
function ChangeData()
{
    $("#part2 ul").append("<li><a href="http://www.freelancephpdevelopment.com">Wordpress Freelancer India</a></li>");			
    var counter = $("#part2 ul li").size();
    if(parseInt(counter)>10)
  	 $('#part2 ul li:first').remove();
    }
}
</script>

Here, Code 1 is your div where you set up the <ul> and <li> elements. while in code 2 its show you how to insert new <li> elements, if you see then <li><a href=”http://www.freelancephpdevelopment.com”>Wordpress Freelancer India</a></li> is added in the append function which will insert new <li> after last <li> element.

if you need to count the <li> elements then its also simple, you can see that i count the elements and if its more then 10 elements then remove the first elements. some time work is very simple but we make it complicated.

Incoming search terms:

how to remove first li jquery

if you are looking for web consultant, PHP Freelancer USA, Wordpress Freelancer USA or you want to hire PHP freelancer USA then You can contact me. if you have any work related to php development then You can contact me. I am working in the PHP since 2005, so i have good experience in the php development.