Move dom elements in loop

Question

We have a page that lists the items in a user's cart. Links are presented with each item for the actions Edit and Remove. We'd like to test the placement of the Edit link by placing it above the remove link using javascript, however I'm not sure how to do it when there are an unknown number of items that could exist within the user's cart.

A snippet from the dom is below:

<div class="item-table first">
    <div class="item" data-part-number="ABC123">
        <a href="/item1detailurl" title="item name"><h3 class="item-name">Item 1 name</h3></a>
        <dl>
            <dt class="item-attribute">Color:</dt><dd class="item-attribute-value">Blue</dd>
            <dt class="edit"><a href="/edititem1url" class="">Edit</a></dt><dd></dd>
        </dl>
    </div>
    <div class="item-qty">
        <span class="item-qty">QTY:</span>1
        <p><a class="delete-item" data-action="delete" href="/deleteitem1url"">Remove Item</a></p>
    </div>
</div>

<div class="item-table">
    <div class="item" data-part-number="DEF456">
        <a href="/item2detailurl" title="item name"><h3 class="item-name">Item 2 name</h3></a>
        <dl>
            <dt class="item-attribute">Color:</dt><dd class="item-attribute-value">Black</dd>
            <dt class="edit"><a href="/edititem2url" class="">Edit</a></dt><dd></dd>
        </dl>
    </div>
    <div class="item-qty">
        <span class="item-qty">QTY:</span>1
        <p><a class="delete-item" data-action="delete" href="/deleteitem2url"">Remove Item</a></p>
    </div>
</div>

The desired state moves each Edit link to within a new p element above the existing p element that contains Remove Item link.

Answer 1

This should do it:

  $('.item-table').each(function() {
      var deleteItem = $(this).find('.delete-item');
      var editItem = $('<p></p>').append($(this).find('.edit'));
      $(deleteItem).before($(editItem));
  });