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;">
  <li><a href="">PHP Freelancer</a></li>
  <li><a href="">PHP Freelancer India</a></li>
  <li><a href="">Freelance PHP Developer</a></li>
  <li><a href="">PHP Freelance Programmer</a></li>
  <li><a href="">PHP Freelance Developer</a></li>
  <li><a href="">PHP Freelancer USA</a></li>
  <li><a href="">PHP Freelancer UK</a></li>
  <li><a href="">PHP Freelancer Australia</a></li>
  <li><a href="">Wordpress Freelancer</a></li>
  <li><a href="">Freelance PHP Developer</a></li>
Code 2
<script type="text/javascript">
function ChangeData()
    $("#part2 ul").append("<li><a href="">Wordpress Freelancer India</a></li>");			
    var counter = $("#part2 ul li").size();
  	 $('#part2 ul li:first').remove();

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=””>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.

Leave a Reply

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