Remove Last li from ul JavaScript

In this tutorial we will learn How To Remove Last li from ul with JavaScript. HTML DOM Element removeChild() method and lastElementChild property can be used to delete the last li from ul tag.

Table of Contents

removeChild() method

removeChild() method removes the child of the HTML element.

In this example it is used to remove the last li tag of ul tag.

lastElementChild property

lastElementChild property returns the last child of the HTML element.

In this example it is used to get the last li tag.

lastElementChild property is a read only property.

HTML Code

HTML Code is given below, in this code we have a ul tag with three list items and a button tag with onclick event.


<!DOCTYPE html>
<html>
<head>
<title>Remove Last li from ul JavaScript</title>
</head>
<body>

<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<button onclick="deleteLastLi()">Delete Last li</button>    
    
<script src="script.js"></script>    
</body>
</html>

JavaScript Code

Take a look at the JavaScript code, in this code getElementById() method is used to select the ul tag. While removeChild() method removes the last child of ul tag which is last list item. lastElementChild property is used to target last list item.


<script>
function deleteLastLi()
{
    var ul = document.getElementById('list');
    ul.removeChild(ul.lastElementChild);
}
</script>

Demo

Check Demo

Video Tutorial

Watch video tutorial on How To Remove Last li from ul tag in JavaScript.