JavaScript Code

How to hide list element in document using JavaScript?

Tutorials using JS

Hide link element in document

Given a link element in the document, hide the list element using JavaScript.

Solution

To hide a list element in the document using JavaScript, we can use Element.style.display property. Get the list element listElement, and set its CSS display property with "none".

listElement.style.display = "none";

Program

In the HTML code, we have a list element with id myList. When user clicks on the Click me button, we get the list element by id myList and hide it by setting its CSS display property with none.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Tutorial</h1>
<h2>Hide list element</h2>
<button id="myBtn">Click me</button><br>
<ul id="myList">
    <li>apple</li>
    <li>banana</li>
    <li>cherry</li>
</ul>

<script>
//set onclick listener for #myBtn
document.getElementById("myBtn").addEventListener("click", function() {
    //get the list element
    const myList = document.getElementById("myList");
    //hide the list element
    myList.style.display = "none";
});
</script>

</body>
</html>

Copyright @2022