Question

I have a link which I want to display a modal dialog box, containing a headline and a copy of the parent element of the clicked link.

$('#link').live('click',function(){
    container = $(this).parents(".container")[0];
    message = $("<h2>You clicked on this.</h2>" + container);
    message.find(".foo, .bar, .lorem").remove();

    console.log(message[0]);
    // code for displaying the box using message[0]
});

I also have to filter out certain children of the container element.

However, this (being my fourth attempt at it after dabbling with clone() and insertAfter() for a while) does not work. It only displays the <h2>, with no sight of the copy of the parent element.

Obviously the original parent element still visible on the page behind the modal should not be affected.

What’s wrong here?

Answer 1

$(document).on('click', '#link', function(){
    var container = $(this).closest(".container").clone(true);
        container.find(".foo, .bar, .lorem").remove();
    var message = $("<h2>You clicked on this.</h2>").add(container);

    $('#modalID').append(message);

    console.log(message);
});