With jQuery, how can I remove a list item and move it to a specific location within the same list?

Question

Say I have a simple list

<ul>
    <li>Cats</li>
    <li>Dogs</li>
    <li>Birds</li>
    <li>Snakes</li>
    <li>Spiders</li>
</ul>

I want to remove Birds, and move it to any other position. More than anything, I'll probably have to target the item to move by its text content, and choose where to put it based on the other item's text content.

score 8 · Accepted Answer · answered Aug 08 '13 at 19:05

8

Use :contains() and .insertAfter() to move them around:

$('li:contains("Birds")').insertAfter('li:contains("Cats")');

jsFiddle example

answered Aug 08 '13 at 19:05

j08691

190,436
28
232
252

score 0 · Answer 2 · answered Aug 08 '13 at 19:19

0

You can store it using detach, and then use append or insertAfter to add again.

var $item = $('li:contains("Birds")').detach();
$('ul').append($item);

http://jsfiddle.net/bA7p3/

answered Aug 08 '13 at 19:19

Ricardo Alvaro Lohmann

25,061
6
80
80

This only moves an item to the end of the list. What happens if the OP wants to move it to a different position? Also, the OP said "I'll probably have to target the item to move by its text content, and choose where to put it _based on the other item's text content_." – j08691 Aug 08 '13 at 19:33

score 0 · Answer 3 · answered Aug 08 '13 at 20:41

0

Don't know if this is of any interest to you, but it might:

http://jqueryui.com/sortable/

answered Aug 08 '13 at 20:41

Sam Creamer

4,561
12
29
46

With jQuery, how can I remove a list item and move it to a specific location within the same list?

3 Answers3