click events in JavaScript

Question

I'm building a list of images dynamically. What I want to happen is when a user clicks the close text (inside my DIV element) the code will delete that particular image (list element). The code below does that the FIRST time the DIV is selected. After that it seems to ignore my div event listener and jump straight into the jquery on click function.

function removeItem(){

var test = document.querySelector('li > div').addEventListener('click', function(){
    $(document).on('click', 'li', function () {
        var photoId = (this.id);
        $("#"+photoId).remove();
    });
});

How can I make it so it will ALWAYS run when the DIV is selected instead of just the first time?

I'm new to learning about JavaScript so any help is appreciated!

Barmar · Accepted Answer · 2016-09-05 22:43:47Z

1

When the user clicks on the DIV, you're not removing anything, you're just adding a new click listener on all LIs that removes that LI. Then the user needs to click again to trigger the second handler. It should simply be:

$(document).on('click', 'li > div', function() {
    $(this).parent().remove();
});

BTW, there's no point in writing

    var photoId = (this.id);
    $("#"+photoId).remove();

It's simply $(this).remove(). Why go searching for an ID when you already have a reference to the element itself?

answered Sep 5, 2016 at 22:43

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

click events in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related