CODEWITHSUNDEEP
jquery
Elitmiar
Elitmiar

Reputation: 36839

Can't move li elements from one unorderted list to another

I have two un-ordered list

<ul id="#list1">
<li>one</li>
<li>two</li>
</ul>

<ul id="#list2"></ul>

and two buttons

<input id="add" name="yt1" type="button" value="<<" /><br />
<input id="remove" name="yt2" type="button" value=">>" />

If the button with the id add is pressed all elements from #list1 should be move to #list2. How do I move elements from one list to another using JQuery

I though of something like the below, but not sure how to do the actual moving

$("#add").click(function(){
$("#list1 li").each(function(){
//Do not know what to put in here
}
})

Upvotes: 4

Views: 2970

Answers (4)

Felix Kling
Felix Kling

Reputation: 816452

You can use appendTo:

$("#add").click(function(){
    $("#list1 li").appendTo('#list2');
});

DEMO

Also change your IDs from <ul id="#list1"> to <ul id="list1">.

Upvotes: 10

MrMaksimize
MrMaksimize

Reputation: 542

Try this. Didn't test it, but it should work (logically).

$("#add").click(function(){
$("#list1 li").each(function(){
var holder;
$(this) = holder;
$(this).remove();
$('#list2').append();
}
});

Upvotes: 0

jamesmortensen
jamesmortensen

Reputation: 34038

      $('#list2').html( $('#list1').html() );

Upvotes: 1

Tim Schmelter
Tim Schmelter

Reputation: 460138

  //this will move selected items from yt1-list to yt2-list     
  $("#yt1 option:selected").appendTo("#yt2");

  //this will move all selected items from yt1-list to yt2-list
  $("#yt1 option").appendTo("#yt2");

Upvotes: 1

Related Questions