what is wrong with my code?? Javascript DOM

Question

What is wrong with my code? I created 2 ul's and I was able to add and remove items in the first list. I decided I wanted to make another one, and now I cant remove items from the second list but I can add items into it.

On the console log it says:

"Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLButtonElement.removeItemButton.addEventListener"

HTML

<div class="secondDiv">
        <h1>Second Box</h1>
        <ul class="secondList">
            <li>Lorem, ipsum dolor5.</li>
            <li>Lorem, ipsum dolor6.</li>
            <li>Lorem, ipsum dolor7.</li>
            <li>Lorem, ipsum dolor8.</li>
            <li>Lorem, ipsum dolor9.</li>
            <li>Lorem, ipsum dolor10.</li>
        </ul>
    </div>
    <input type="text" class="secondInput">
    <br>
    <br>
    <button class="secondAdd">Add An Item</button>
    <br>
    <br>
    <button class="secondRemove">Remove An Item</button>

JAVASCRIPT

const addItemInput = document.querySelector('input.secondInput')
const addItemButton = document.querySelector('button.secondAdd')
const removeItemButton = document.querySelector('button.secondRemove')

addItemButton.addEventListener('click', () => {
    let ul = document.querySelector('ul.secondList')
    let li = document.createElement('li')
    li.textContent = addItemInput.value
    ul.appendChild(li)
    addItemInput.value = ''
})


removeItemButton.addEventListener('click', () => {
    let ul = document.querySelector('ul.secondList')
    let li = document.querySelector('li.secondList')
    ul.removeChild(li)
})

Answer 1 · 2018-04-30T06:59:00Z

April 30, 2018 6:59am

Hi Timothy,

Firstly, let me say that I'm no fan of selecting DOM elements inside EventListeners because of scope problems.

Secondly, The (li) elements you're selecting with li.secondList, it is incorrect because the list items do not have the class 'secondList'.

const firstList = document.querySelector('.firstList');
const secondList = document.querySelector('.secondList');
const buttonAdd = document.querySelector('.add');
const buttonRemove = document.querySelector('.remove');
const inputValue = document.querySelector('.inputValue');

buttonAdd.addEventListener('click', () => {
    let li = document.createElement('li');
    li.textContent = inputValue.value;
    firstList.appendChild(li);
  }
    );

buttonRemove.addEventListener('click', () => {
    let li = firstList.querySelector('li:last-child');
    firstList.removeChild(li);

This is a reference from my code :

Because I have selected the <ul> with the class .firstList and stored it in the variable I'm simply accessing the last child of the 'li' element

Hopefully this helped,

Shay

Answer 2 · 2018-04-30T08:26:30Z

April 30, 2018 8:26am

Hi Timothy,

I haven't reached jQuery yet, but when learning how to code it is pretty obvious it won't be easy and some roadblocks would be met, but again that's the fun part.

Happy I could help

Shay

Welcome to the Treehouse Community

Looking to learn something new?

Timothy Harrington Bourne

Timothy Harrington Bourne

what is wrong with my code?? Javascript DOM

2 Answers

Shay Paustovsky

Shay Paustovsky

Timothy Harrington Bourne

Timothy Harrington Bourne

Shay Paustovsky

Shay Paustovsky