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:

  • remove element ul

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>