13/14 Remove what has been clicked


#1

Hello all, I got through the exercise with the code below, but when applying the code nothing actually happens (cannot add nor remove text). Can anybody show me how a functioning code would look like?

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

#2

@padu01,

Please re-edit your Post by
adding a blank-line above your code,
selecting your code
then =click=ing the </> button of your editor,
your HTML-code will then visible.....


#3

@padu01,

-1

With your

 var toAdd = $('input[name=checkListItem]').val();

you collect the input given,
and assign the collected-input to the variable toAdd

As an argument of your jQuery-append()-method
you want a div-Element
like

<div class="item">collected-input</div>

This should be a string Value
which you create
by either using

 '<div class="item">collected-input</div>'

or

 "<div class='item'>collected-input</div>"

As you want to integrate the value, which you assigned to the variable toAdd,
into this =newly= created div-Element
you will have to expand the string
by either using

'<div class="item">' + toAdd + '</div>'

or

    "<div class='item'>" + toAdd + "</div>"

-2

With

$(document).on("click", "item", function() {
});

you are attaching a =click= Eventhandler
to every HTML-Element which is carrying the class-attribute with class-name "item"

In our case that would be all =newly= created div-Elements.

Nice to know is
that if you =click= on one of those =newly= created div-Elements,
internally,
it will captured by this
so you will be able to use a code-line like

this.remove()

as part of your item =click= Eventhandler.....

google search
== the Book ==
remove() site:jquery.com

== discussions / opinions ==
jquery remove() site:stackoverflow.com


#4

This code worked for me also, but it isn't doing what it supposed to... Still thanks tho.


#5

@llalov,
Maybe if you presented your code..we could be of help...


#6

Dear Leon, thanks for your help. I modified the code to that displayed below. However, still nothing going on when trying to apply it. If you managed to create a functioning code I would be very glad if you could post it here so I can have a look myself where the bugs are.

$(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();
    });
});

#7

@padu01,

Please re-edit your Post by
adding a blank-line above your code,
selecting your code
then =click=ing the </> button of your editor,
your HTML-code will then visible.....


#8

@padu01,

The thing you should be aware of
that a string Value
is encapsulated with a pair
of either double-quotes-" " ( "a string with double-quotes" )
or single-quotes-' ' ( 'a string with single-quotes' )

But if want to express an other string with the string
and you are using a double-quoted-string you have to use single-quote
like "this a double-quoted with a 'single-quote' "

or you are using a single-quoted-string you have to use double-quote
like 'this a single-quoted-string with "double-quote" '

THUS
you will have to change your

 "<div class = "item">"

into

'<div class = "item">'

or

"<div class = 'item'>"

#10

I know this is an old post but it's new for me and others that are confused. By adding this.remove(); in the code you will NOT see a change in page showing the button. Just enter a word into the ADD box and click Add. Once the word appears on the page below the box just click on the word to make it disappear.


#11

Actually add $(this).remove()


#16