13/14 Remove what's been clicked - help!


#1

Hey guys,

I have a problem. I don't get it, why the remove function in my code is not working. When I add some things to the list, they will added at the end of the list. That seems correct... But when I add exactly the same things again and press the "add" button, nothing has been removed from the list. The thing/world is just two times added to the list. I thought, if we add a thing again, the remove function will remove the duplicate world.

Do you understand my problem and caan someone help me?

Here is my code (codeacademy gave a green confirmation)..but I realy don't get the remove function..

$(document).ready(function() {
    $('#button').click(function() {
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append('<div class="item">' + toAdd + '</div>');
    });
    $(document).on('click', '.item', function() {
        $(this).remove();
    });
});

#2

Same issue here. I've added the code and cleared the section but the code doesn't work.

My thinking is that it's not supposed to work. If you think about it that code makes no sense. First part of the code says "if there's stuff, add to list", second part says "if there's stuff, remove from list". I guess jQuery just picks the first one and does that.

In order for it to remove listings, you'd need an if statement that checks if your text matches one of the items appended to the list, which would make it a lot more complicated.


#3

Yes, I had the same thinking...So we learned the remove function in theory and not in action.
Maybe a inconvenient exercise to teach this topic.


#4

Hi Trawald and @gigarockstar91233,

The remove function is working just fine :) You seem to be clicking the Add button and thinking it will remove everything else that's already been added or something. The Add button only adds the text that's currently in the <input>, and it doesn't do anything else. To remove something, you then need to click the added item, and then it will be removed.
If you want to clear out the <input> after clicking the Add button, you could add this at the end inside $('#button).click(...);:

toAdd.val("");

#5

Ohh... :sweat_smile:

Thanks buddy, that works!


#6

No problem - glad I could clear that up for you :)
Good luck with the rest of the course!


#7

I'm sorry if this just repeats said. For clearing out the field of the input right too is the next:

$('input').val('');

Before closing tokens of click(function() by separately line.
Hope, it'll help).


#9