Edit Text by Click

by ChrisStanyon

HTML

<ul id="myUL">
    <li><input type="radio" value="Item3" name="group1" /><span class="edit">Item 1</span></li>

    <li><input type="radio" value="Item2" name="group1" /><span class="edit">Item 2</span></li>

        <li><input type="radio" value="Item1" name="group1" /><span class="edit">Item 3</span></li>
</ul>

JavaScript

$('#myUL').on('click', '.edit', function() {
    //create the edit box and button
    edit = $('<input />').val($(this).html()).addClass('editBox');
    button = $('<button>').text('done').addClass('done');
    $(this).parent('li').append(edit, button);
    $(this).hide();
});

$('#myUL').on('click', '.done', function() {
    //put the text back in:
    li = $(this).parent('li');
    newText = li.find('.editBox').val();
    $('.edit', li).html(newText).show();
    $('.editBox, .done', li).remove();
});