Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

why removeChild is not hiding elements

var ul = document.querySelector('ul');
var li = document.querySelectorAll('li');  
var button = document.querySelector('button');
button.addEventListener('click', function() {
    ul.removeChild(li);
});

i run these code to hide elements but it wont hide what to do

my html code look like this:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
</head>
<body>
<ul>
    <li>Hello world</li>
    <li>i love mty family</li>
    <li>i love to play video games</li>
    <li>i love web designing</li>
    <li>i love programming langauges</li>
</ul>
<button>click me to remove a list-item</button>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

Which list item do you need to remove?

At the moment the code will if successful remove all the list items.

You can try selecting a specific list item using something like this

var list = document.getElementById("myList");   // Get the <ul> element with id="myList"
list.removeChild(list.childNodes[0]);  

Which would select the first list item of the unordered list given that arrays are zero indexed.

i wan to remove every child

if i select a element using querySelectorAll('li') lets say li and if i sleect its parent element ul with querySelector and assign it to variable ul if i try to remove it with ul.removeChild(li) it wont work