Question

I can’t tell what is wrong with this jQuery code. I’m receiving no errors from the debugger. I’m at a lost with what is wrong.

<ul id="list"></ul>

<script>

$(document).ready(function() {

$('#show_place_on_screen').click(function () {

var address = $('#address').val();

$("#list").append('<li>' + address + '<input type="button"   

id="delete" value="Delete"/></li>');

});

$("#delete").click(function() { 

    $(this).parent().remove();

});});

</script>

Answer 1

You should delegate the click event, also you can use classes, IDs must be unique:

$(document).ready(function() {
    $('#show_place_on_screen').click(function() {
        var address = $('#address').val();
        $("#list").append('<li>'+address+'<input type="button" class="delete" value="Delete"/></li>');
    });

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