CODEWITHSUNDEEP
javascriptjqueryloopseach
Ryan
Ryan

Reputation: 15270

How can I move all elements to another wrapping element?

I have two lists (#product and #cart). People can click on an item and move it to the second list one at a time. But I am looking to allow people to add ALL items in the first list to the second list. And the reverse as well — remove all items from cart.

Can you help?

Here's my html:

<h2>Product List</h2>
<a id="add-all">Add all items to cart</a>
<ul id="product">
    <li id="item1">item 1</li>
    <li id="item3">item 3</li>
    <li id="item5">item 5</li>
</ul>

<h2>Shopping Cart</h2>
<a id="remove-all">Remove all items</a>
<ul id="cart">
    <li id="item2">item 2<input type="hidden" name="cartItems" value="item2"></li>
    <li id="item4">item 4<input type="hidden" name="cartItems" value="item4"></li>
</ul>

As you can see above, when an item is individually added to the cart, I .append an input tag with the same id.

The rough jQuery looks something like this:

$('#product').on('click','li', function() {
    var itemID = $(this).attr('id');
    var itemLabel = $(this).html();
    var newItemLabel = itemLabel + '<input type="hidden" name="cartItems" value="' + itemID + '">';
    $(this).remove();
    $('#cart').append('<li id="' + itemID + '">' + newItemLabel + '</li>');
});

This works just fine one at a time. But I'm stuck trying to iterate through each item in the product list to add all (or remove all).

Can you point me in the right direction?

Especially since I need to add an input element for every list item. So I can't just take the html() of #product and append to #cart without looping through each one and appending an input.

Tl;dr

  1. #add-all click should move all items in #product to #cart, appending an input to each
  2. #remove-all click should move all items in #cart to #product, removing all input tags
  3. how?

Upvotes: 0

Views: 203

Answers (4)

Harrison
Harrison

Reputation: 13

Try adding a class of remove to each product li that needs to be removed. Then loop though all the children of products, if the li has a class of remove, add it to the cart.

Adding the class

$('ul#products li').click( function() {
    $(this).addClass('remove');
});

Looping

$('ul#products li').each( function() {
    if($(this).hasClass('remove')){
       $(this).appendTo('#cart');
    }
});

You need something to trigger the aforementioned, button?

Upvotes: 0

jfriend00
jfriend00

Reputation: 707686

You can just do something simple like this:

$("#add-all").click(function() {
    $("#products").children().appendTo("#cart");
});
$("#remove-all").click(function() {
    $("#cart").children().appendTo("#products");
});

And, then you can add to this, the code to add/remove the <input> tag or just always have the input tag present and have it hidden via CSS when not in the cart.

Upvotes: 0

Ravi Y
Ravi Y

Reputation: 4376

THis would work for add- all

$('#add-all').on('click', function () {
    $(this).siblings('ul').find('li').each(function (index, item) {
    $(item).append("<input type=\"hidden\" name=\"cartItems\" value=\"" + $(item).attr('id') + "\"/>");
    $('#cart').append($(item));
  });
});

You could follow a similar logic for remove all.

Check this fiddle: http://jsfiddle.net/hcXpY/

Check this fiddle for the remove all code as well : http://jsfiddle.net/hcXpY/2/

$('#remove-all').on('click', function () {
  $(this).siblings('ul').find('li').each(function (index, item) {
    $(item).find('input').remove();
    $('#products').append($(item));
  });
});

Upvotes: 2

gurvinder372
gurvinder372

Reputation: 68413

whats wrong with iteration?

$('#product li').each( function() {
    var itemID = $(this).attr('id');
    var itemLabel = $(this).html();
    var newItemLabel = itemLabel + '<input type="hidden" name="cartItems" value="' + itemID + '">';
    $(this).remove();
    $('#cart').append('<li id="' + itemID + '">' + newItemLabel + '</li>');
    removeDuplicatesFromCart();
});

function removeDuplicatesFromCart()
{
 //now remove any duplicates if there are in the carts
}

Upvotes: 0

Related Questions