How to make a "div" clickable using Jquery

Question

How to make a div clickable using Jquery? I tried to do the below but nothing happens, why?

 $(".delete").on("click", function() {
     $(this).closest(".card").remove();
 });
})

full code:

$(document).ready(function() {
    var num = 0;
    $("#add").click(function() {
        $("main").append('<div class="card" id="photo' + num.toString() + '" style="width: 20rem;">\
        <div class="layer"></div>\
        <div class="card-block">\
        <h4 class="card-title" id="title' + num.toString() + '"></h4>\
        <p class="card-text" id="text' + num.toString() + '"></p>\
        </div>\
        <div class="card-block">\
            <div class="delete">Del</div>\
            <div class="edit">edit</div>\
        </div>\
        </div>');
        var title = $("#noteTitle").val();
        var body = $("#noteBody").val();
        var photo = $("#notePhoto").val();
        if (photo) {
            $("#photo" + num.toString()).prepend('<img class="card-img-top" src=' + photo + ' alt="Card Image">');
        } else {
            $(".layer").css({"background-color": "yellow", "position": "absolute", "opacity": ".1", "top":"0", "left":"0", "width": "100%", "height": "100%"});
        }
        $(".card-title#title"+ num.toString()).html(title);
        $(".card-text#text"+ num.toString()).html(body);

        $("#noteTitle").val("");
        $("#noteBody").val("");
        num ++;
    });

    $(".delete").on("click", function() {
        $(this).closest(".card").remove();
    });
})

Answer 1

[UPDATE 18/07/2017]

Instead use:

$("main").on("click", ".delete", function() {
    (this).closest(".card").remove();
});

The issue is associated with the creation of dynamic elements. The jQuery syntax to register clicks on dynamically created buttons or similar is slightly different.

For these cases use the general form of:

$(<wrapper>).on("click", <dynamic-element-identifier>, function() {...})

This attaches an event handler to <wrapper> which is an already existing parent element of <dynamic-element-identifier> (in your case the delete button).

JSFiddle: https://jsfiddle.net/2Tokoeka/wvL0ufyL/

[PREVIOUS]

Your code will work provided the provided the 'card' DIV is the closest, older ancestor unless the DIV itself has the card class (as the .closest() method traverses from the selected element up the DOM tree).

JSFiddle: https://jsfiddle.net/2Tokoeka/jLor41gk/

.closest() : https://api.jquery.com/closest/

Your issue could be related instead to the structure of your HTML. This cannot be confirmed without a larger block of code for context.

Hopefully this helps in diagnosing your issue and fixing the code.