CODEWITHSUNDEEP
javascriptjquery
menix
menix

Reputation: 168

click events in JavaScript

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!

Upvotes: 0

Views: 44

Answers (1)

Barmar
Barmar

Reputation: 780724

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?

Upvotes: 1

Related Questions