He estado pensando mucho, por qué cuando uso jquery, el siguiente código funciona perfectamente con el evento onclick anidado, que yo sepa, ese evento anidado debe llamarse una vez que se llamó al evento "padre", y que yo sepa que nunca sucede, pero, increíblemente para mí, funciona.

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

pero cuando anulo el "on('click'" el navegador no reconoce ese evento :(, como en el siguiente ejemplo. ¿Puede alguien explicarme el motivo? ¿Me estoy perdiendo algo?

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