Why javascript execute the code in a nested click event and don't in a normal click event?

Question

I have been thinking a lot, Why when I use jquery the following code runs perfectly with the nested onclick event, as far as I know that nested event should be called once the "father" event was called, and as far as I know that never happens, but, incredibly for me, it works.

$(function() {
    $("#add").on("click", function() {
        var val = $("input").val();
        if(val !== '') {
            var elem = $("<li></li>").text(val);
            $(elem).append("<button class='rem'>X</button>");
            $("#mylist").append(elem);
            $("input").val("");
            $(".rem").on("click", function() {
                $(this).parent().remove();
            });
        }
    });
});

but when I unnest the "on('click'" the browser doesn't recognize that event :(, like the following example. Can someone explain me the reason for that, am I missing something?

$(function() {
    $("#add").on("click", function() {
        var val = $("input").val();
        if(val !== '') {
            var elem = $("<li></li>").text(val);
            $(elem).append("<button class='rem'>X</button>");
            $("#mylist").append(elem);
            $("input").val("");
        }
    });
    $(".rem").on("click", function() {
        $(this).parent().remove();
    });
});