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
John Baldwin
7,969 Points"Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'." error message
I can't figure out why I am getting error message in Chrome, what am I missing?
//from app.js file --- code snippet
const removeItemButton = document.querySelector('button.removeItemButton');
removeItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName('ul')[0]; let li = document.querySelector('li.last-child'); ul.removeChild(li); });
//from index.html file --- code snippet
<button class="description">Change List Description</button> <ul> <li>grapes</li> <li>amethyst</li> <li>lavender</li> <li>plums</li> </ul> <input type="text" class="addItemInput"> <button class="addItemButton">Add Item to List</button> <button class="removeItemButton">Remove Last Item</button> </div>
4 Answers
Steven Parker
229,786 Points
Pseudo-class selectors are designated by a colon (:).
You gave querySelector an argument of 'li.last-child', but that would target a list item with a class of last-child. To get the list item that is the last child, you should use the selector 'li:last-child' (note colon instead of period).
Marcin Czachor
9,641 PointsYou can add class to ul tag ( <ul class="class_name"> ) in html code and call it like this:
let ul = document.querySelector('ul .class_name');
Parker Brown
24,308 PointsHey for those still getting this ERROR even after making these revisions. Like in my case where I was working with element nodes in a Nested <ul>. Following along with the lesson we define our let li = document.querySelector('li:last-child') to grab the final <li> in our <ul> list. Using Sublime Text in a Chrome browser, I kept getting the Uncaught Error Type from above. So I tried using the .lastElementChild() method instead:
removeItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName( 'ul' )[2]; let li = ul.lastElementChild; ul.removeChild(li); });
This solution worked for me.
And as always, Chrome Dev Console + StackOverflow => Stay Alive, a Solution Will Find You.
Alexandre Formoso
10,201 Pointshey @Parker Brown,
Thank you very much for this. It's 4am and you have just saved me precious time on this
I had exactly the same problem as you:
the ul.removeChild() method did not work for me for whatever reason
Henry Garmendia
Courses Plus Student 11,762 PointsI have the same problem and is giving me this => Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
<dode> removeItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName('ul')[0]; let li = document.querySelector('li:last-child'); ul.removeChild(li); }); </code>
I think I know what's the problem, I have other <ul>s and <ol>s in the same HTML and that's why is giving me the error code, how can I fix that, whithout removing the other <ul> and <ol>s? I tried givin a class to the <ul> but is not working...Pls help anyone, and by the way HAPPY NEW YEAR!
Alexandre Formoso
10,201 PointsTo anyone experiencing the same problem as Henry,
Try changing the index value for your declared ul to correspond to the element you wish to select in the DOM
e.g.: let ul = document.getElementsByTagName('ul')[1]; //index 1 if you want to target the second ul/ol
Hope that helps :)
John Baldwin
7,969 PointsJohn Baldwin
7,969 PointsThe tiny details take a refined eye... I looked at that a million times! Thanks!