Hello friends,
Today we learn how to remove a particular item from a list of item using jQuery. For this, jQuery provides a selector :eq() or a method .eq(). This method helps in selecting a particular item from the list.
Syntax:
.eq( index )
index is the integer type value which specify the element position in the list of items. List first index starts from 0. That is, if we want to find out the 2nd element from the list then we will pass index as 1 as follow:
.eq( 1 )
Let's take an example to understand this. Suppose we have a list of items in which we want to change the text of third item on button click event. So we will write code as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.list * {
border: 2px solid lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.removeitem').click(function(){
var thirdLink = $( '.list' ).find( "li" ).eq( 2 );
var linkText = thirdLink.text('New third item of the list');
});
});
</script>
</head>
<body>
<ol class='list'>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
<li>list6</li>
<li>list7</li>
<li>list8</li>
<li>list9</li>
<li>list10</li>
</ol>
<button class='removeitem'>Replace third item</button>
</body>
</html>
In above example, 'list3' text will be replaced with 'New third item of the list' after click on button.
0 Comment(s)