Question

What is the best way to add elements, incl. a link to remove themselves, to a div?
This almost works:

function displayElements(objekt) {
    $('#container').empty();
    for(var key in objekt) {
        if(objekt.hasOwnProperty(key)) {
            $('#container').append('<div id="' + key + '">' + 
                key +
                '<a id="del' + key + '">delete'</a></div>');
            $('#del' + key).click(function() {
                delete objekt[key];
                displayElements(objekt);
            });
        }
    }
}

The strange effect is, that no matter which delete link I click, always the last element gets deleted.
Why is that and is there a more elegant way to accomplish this?

Regards, Eriq

Answer 1

You can replace that with:

// build your markup
function displayElements(objekt) {
    var container = $('#container').empty();
    for (var key in objekt) {
        if (objekt.hasOwnProperty(key)) {
            container.append('<div id="' + key + '">' + key + '<a id="del' + key + '">delete< /a></div > ');
        }
    }
}


displayElements(objekt);

// bind to all anchors who's ids start with 'del'
$("#container").on("click", "a[id^='del']", function() {
    $(this).remove();
});