Question

I have a simple ordered list:

<ol>
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ol>

I’m using jQuery to make a sortable list where you can drag and drop to reorder items in the list. But I’d also like users to be able to delete list items by clicking an “x” icon where the ordered list number typically is on hover. The right side is already used by a “move” icon (three horizontal lines).

If I were hovering over list item 2, I would expect to see:

1. one
X  two     =
3. three

I need the 2 replaced with an X and it to be clickable.

(Note: the = above is meant to symbolize the move hover icon, typically three horizontal lines.)

Answer 1

The problem is you won’t be able to change an ordered list into an unordered list (to just swap out the number into an X on the fly like that).

Instead have an unordered list with the Numbers being laid out in span tags that we can swap out for the X (image / whatever you want). This way it’s easy to bind the delete event onto that as well!

css ul li { list-style-type: none; }

<ul>
    <li><span>1.</span> one</li>
    <li><span>2.</span> two</li>
    <li><span>3.</span> three</li>
</ul>

jsFiddle DEMO

$('ul li').each(function () { 
    var this$ = $(this),
        _old = $(this).find('span').text();

    this$.on({
        mouseover: function () {
            this$.find('span').text('X');
        }, 
        mouseout: function () {
            this$.find('span').text(_old);
        }
    });

    this$.find('span').on('click', function () {
         if ( $(this).text() === 'X') {
            if (confirm('Are you sure you want to Delete?')) {
                $(this).closest('li').remove();
            }
        }
    });
});
​