<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id = "messages"></ul>
<input id = "textboxes" type="text">
<button id ="button">Add</button>
<button id ="removebutton">Remove</button>
</body>
</html>
<script>
button.addEventListener("click",function()
{
var newMessage = document.createElement("li"); //Store element in a new variable
newMessage.textContent = textboxes.value; // pass the value of textbox inside the text content of this variable
messages.appendChild(newMessage); // append this variable to the ul whose id = messages
textboxes.value = ""; // clears the textbox at the end
});
removebutton.addEventListener("click",function()
{
const list = document.getElementById("messages");
if (list.hasChildNodes())
{
list.removeChild(list.children[0]);
}
else
{
alert("No elements");
}
});
</script>
