Remove First li from ul JavaScript

In this tutorial we will learn How To Remove First li from ul with JavaScript. HTML DOM Element removeChild() method and firstElementChild property can be used to delete the first 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 first li tag of ul tag.

firstElementChild property

firstElementChild property returns the first child of the HTML element.

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

firstElementChild 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 First li from ul JavaScript</title>
</head>
<body>

<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<button onclick="deleteFirstLi()">Delete First 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 first child of ul tag which is first list item.

firstElementChild property is used to target or select the first list item.


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

Demo

Check Demo

Video Tutorial

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