I'm trying to move list items from one un-ordered list to another. This works fine the first time but once the items are moved I am unable to move them back. I made a fiddle to illustrate what i'm talking about.
Check it out here -> jsfiddle
HTML
<table>
<tr>
<td>Numbers</td>
<td>Letters</td>
</tr>
<tr>
<td>
<ul class='list1'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</td>
<td>
<ul class='list2'>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</td>
</tr>
</table>
<input type='button' value='<<' id='move_left' />
<input type='button' value='>>' id='move_right' />
jQuery
$('body').on('click', 'li', function() {
$(this).toggleClass('selected');
});
$('#move_left').click(function() {
$('.list1').append('<li>', $('.list2 .selected').text(), '</li>');
$('.list2 .selected').remove();
});
$('#move_right').click(function() {
$('.list2').append('<li>', $('.list1 .selected').text(), '</li>');
$('.list1 .selected').remove();
});
CSS
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
.selected {
background-color:#efefef;
}
As you can see the items move from left to right or right to left, yet once they are moved i am unable to move them back. Any help is appreciated.
It's easier than you think:
$('#move_left').click(function() {
$('.list1').append($('.list2 .selected').removeClass('selected'));
});
$('#move_right').click(function() {
$('.list2').append($('.list1 .selected').removeClass('selected'));
});
http://jsfiddle.net/KjJCa/2/
When you append an existing element to another, it is moved there. No need to clone the elements and manually remove the originals as you were doing.
try:
$('#move_left').click(function() {
$('.list2 .selected').each(function(){
$('.list1').append('<li>'+$(this).text()+'</li>');
});
$('.list2 .selected').remove();
});
$('#move_right').click(function() {
$('.list1 .selected').each(function(){
$('.list2').append('<li>'+$(this).text()+'</li>');
});
$('.list1 .selected').remove();
});
http://jsfiddle.net/liamallan1/KjJCa/3/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With