13.remove whats been clicked!


#1

My code looks like this .but when i trying clicking add me.nothing happens

$(document).ready(function() {
$("#button").click(function) {

 $(document).on('click', '.item', function() {
$(this).remove();

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

$('.list').append('

' + toAdd + '
');

});
});


#2

Hi
the answer to your question lies in the instructions :

"Complete your program by adding the .on() event handler as described above. It should go inside your $(document).ready(), but AFTER and OUTSIDE your $('#button').click()."

Cheerio


#3

First of all, without proper formatting and use of the backticks, it's hard to understand what your actual problem is.

The correct method for posting your code is as follows:

  • type 3 backticks before your code. the backticks look like this: --> ` <--
  • then type your code
  • then type 3 more backticks

I will post my code below for you to take a look at. Work on your whitespace and formatting ;-)

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

#4

Thanks for posting that Nick.

I believe the instructions given in lesson 13 are incorrect:
"Complete your program by adding the .on() event handler as described above. It should go inside your $(document).ready(), but after and outside your $('#button').click()."

....when in fact:
the .on() event handler should go inside your $('#button').click() function.


#5

@nickgrimes50 @seegem

the .on() event handler should go inside your $('#button').click() function.

No. Nick, your code is incorrect. The instructions say what should be done. Here's how the code should look with spoilers removed:

$(document).ready(function() {
  $('#button').click(function() {
    // ...
  });

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

#6

Thanks zystvan, yes - the instructions are not incorrect.

However both ways work successfully; but in nick's solution, the .on("click"...) would only be executed if an item had first been added to the list, (which kind of makes sense).


#7

Awesome, this block of code looks so fresh and clean...I think it's VERY useful that admins post the correct code here, because I believe that most students only come to the Q&A forum after they have tried without help for at least 20 minutes. And if they dont: they should ^^


#8

@oscar_vv

most students only come to the Q&A forum after they have tried
without help for at least 20 minutes. And if they dont: they should

:100::100::100:

Unfortunately, people don't always do what's best for their learning experience :confused:


#11

It's hard when you are trying to teach yourself....20 minutes is a good amount of time to ask for help.


#12

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.