删除DOM中的元素

Question

can some one show how to work with few elements in DOM and move them from one block to another, I need use jQuery, for example I have this structure

<div class="block">
    <div class="block_left">
        <div class="title">title 1</div>
        <div class="image">image 1 for title 1</div>
    </div>
    <div class="block_right">

    </div>
</div>

<div class="block">
    <div class="block_left">
        <div class="title">title 2</div>
        <div class="image">image 2 for title 2</div>
    </div>
    <div class="block_right">

    </div>
</div>

<div class="block">
    <div class="block_left">
        <div class="title">title 3</div>
        <div class="image">image 3 for title 3</div>
    </div>
    <div class="block_right">

    </div>
</div>

<div class="block">
    <div class="block_left">
        <div class="title">title 4</div>
        <div class="image">image 4 for title 4</div>
    </div>
    <div class="block_right">

    </div>
</div>

I was trying to use jQuery .each() but not that I need. In result I need this:

<div class="block">
    <div class="block_left">
        <div class="title">title 1</div>
    </div>
    <div class="block_right">
        <div class="image">image 1 for title 1</div>
    </div>
</div>

<div class="block">
    <div class="block_left">
        <div class="title">title 2</div>
    </div>
    <div class="block_right">
        <div class="image">image 2 for title 2</div>
    </div>
</div>

<div class="block">
    <div class="block_left">
        <div class="title">title 3</div>
    </div>
    <div class="block_right">
        <div class="image">image 3 for title 3</div>
    </div>
</div>

<div class="block">
    <div class="block_left">
        <div class="title">title 4</div>
    </div>
    <div class="block_right">
        <div class="image">image 4 for title 4</div>
    </div>
</div>

How do I remove elements? Thanks

Answer 1

To append the .image elements to the next .block_right elements you can do

$('.block_right').append(function() {
    return $(this).prev().find('.image');
});

FIDDLE

Answer 2

$(".image").each(function() {
    $(this).parent().parent().find(".block_right").append($(this));
});

Try that code, should work!

Goodluck.

Answer 3

One possible solution with .each() :

$('.block .image').each(function() {
    $(this).closest('.block').find('.block_right').append(this);
});

DEMO: http://jsfiddle.net/6afBy/

Answer 4

Try to use appendTo() here:

$('.block_left .image').each(function() {
    $(this).appendTo($(this).parent().next()); 
});

Fiddle Demo