jQuery move a div after another div inside a div using insertAfter

Question

I'm failing at the following since 2 hours. I'm trying to move the div id="msg" after the div class="meta anchor" when <i class="icon-delete delete"></i> is clicked. The whole thing has me in knots, because of the way it's structured.

I've marked where the div id="msg" should move to. Can you pls help? My failed efforts are below.

    <div class="reQ">
        <div class="post">
            <div class="entry">
                <div class="links"> 
                    <div class="icons"><i class="icon-delete delete"></i></div>
                </div>

                <div class="meta anchor">
                    Content
                </div>
                !-- div id="msg" goes here --!
            </div>
        </div>
    </div>

    <div id="msg">Div with Message</div>

jQuery

$('.delete').live('click', function() {

    var self = $(this);
    // $('#msg').insertAfter(self.parent()).show();
    // self.parent().after('.msg');

    self.parents('.reQ').$('#msg').insertAfter('.anchor').show();
});

Fiddle

Edit The html part repeats several times on the page. It holds posts. I need the msg to go under only the post where the icon was clicked.

Answer 1

Try this

$('.delete').on('click', function() {
    var anchor = $(this).closest('.post').find('.anchor');
    $('#msg').insertAfter(anchor).show();
});

http://jsfiddle.net/dhR36/4/

Also you are using jquery 1.7 so you should change live to .on

Here is the doc on insertAfter http://api.jquery.com/insertafter/

Answer 2

Try this

Js

$(".icon-delete").click(function() {
    $("#msg").insertAfter(".meta");
})