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 DOM Scripting By Example Adding and Removing Names Removing Names

Posted by ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

Remove button doesn't work until I check confirmed.

My remove button doesn't work until I have checked the checkbox but it isn't the same in video and I followed everything.

const form = document.getElementById('registrar');
const input = form.querySelector('input');
const ul = document.getElementById('invitedList');

function createLI(text){
    const li = document.createElement('li');
    li.textContent = text;
    const label = document.createElement('label');
    label.textContent = 'confirmed'
    const checkbox = document.createElement('input')
    checkbox.type = 'checkbox'
    label.appendChild(checkbox);
    li.appendChild(label);
    const button = document.createElement('button')
    button.textContent = 'Remove'
    li.appendChild(button);
    return li;
}

form.addEventListener('submit', (e)=>{
    e.preventDefault();
    const text = input.value;
    input.value = '';
    const li = createLI(text);
    ul.appendChild(li);
})

ul.addEventListener('change', (e) => {
    const checkbox = event.target;
    const checked = checkbox.checked;
    const listItem = checkbox.parentNode.parentNode;

    if(checked){
        listItem.className = 'responded';
    }else{
        listItem.className = ';'
    }

    ul.addEventListener('click', (e) => {
        if(e.target.tagName === 'BUTTON') {
            const li = e.target.parentNode;
            const ul = li.parentNode;
            ul.removeChild(li);
        }
    })
})

what am i missing?

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! While Adam Beer is correct that the semicolon is misplaced a bit, this doesn't seem to be affecting the code at all. However, there is one line that I find slightly odd in this code and that is this line (which is also present in Dave's code):

const checkbox = event.target;

This line will work in Chrome, Edge and Safari, but will not work in Firefox. The Window.event in the first 3 browsers is global so they understand what you mean. but since the event was passed in as the variable e, that line will have to be different to work in Firefox.

It should be:

const checkbox = e.target;

You say that your code doesn't work because you can't click the "Remove" button until you first click the "Confirm" box, but this seems to be the way it was intended to function and is that way in the video (to an extent). The addEventListener to the "Remove" button is inside the code that is on the "change" eventListener. This means that before there is a change to the ul of some type, that "Remove" button has no event listener. If you wanted to change this, you would need to move the creation of the "click" event listener to outside of the "change" event listener.

Hope this helps! :sparkles:

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Inside the ul.addEventListener correct your code. You write this:

listItem.className = ';'

But this is the good way:

listItem.className = '';

Hope this help.

ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

Adam Beer not that didn't work.