In-place edit

by Budhram Gurung

HTML

<ul class="fa-ul">
    <li><span class="lead justified"> BE/ BTech/ MCS </span>
        <input class='edit' type='text'></input>
        <button class='delete'>Delete</button><button class='edit'>Edit</button>
    </li>
    <li><span class="lead justified"> Solid </span>
        <input class='edit' type='text'></input>
        <button class='delete'>Delete</button><button class='edit'>Edit</button>
    </li>
    <li><span class="lead justified"> Strong </span>
        <input class='edit' type='text'></input>
        <button class='delete'>Delete</button><button class='edit'>Edit</button>        
    </li>
    <li><span class="lead justified"> Sharp </span>
        <input class='edit' type='text'></input>
        <button class='delete'>Delete</button><button class='edit'>Edit</button>
    </li>
    <li><span class="lead justified"> Ability</span>
        <input class='edit' type='text'></input>
        <button class='delete'>Delete</button><button class='edit'>Edit</button>
    </li>
    <li><span class="lead justified"> Deal problems</span>
        <input class='edit' type='text'></input>
        <button class='delete'>Delete</button><button class='edit'>Edit</button>
    </li>
    <li><span class="lead justified"> Strong </span>
        <input class='edit' type='text'></input>
        <button class='delete'>Delete</button><button class='edit'>Edit</button>
    </li>
    <li><span class="lead justified"> Excellent </span>
        <input class='edit' type='text'></input>
        <button class='delete'>Delete</button><button class='edit'>Edit</button>
    </li>
</ul>

CSS

li input.edit {
  display: none; /* Hides input box*/
  width: 150px
}

li span.editing {
  display: none; /* Hides span text*/
}

li input.editing {
  display: inline; /* Shows input text box when .editing*/
}

JavaScript

$(document).ready(function() {
    $('button.edit').click(function(){        
        var label_element = $(this).parent().find('span'),
            input_element = $(this).parent().find('input');
        label_element.addClass('editing');        
        input_element.val(label_element.text());
        input_element.addClass('editing');
    });
    $('button.delete').click(function(){        
        $(this).parent().remove();
    });
     $('input').blur(function(){        
        var label_element = $(this).parent().find('span');
        label_element.text($(this).val());
        $(this).removeClass('editing');
        label_element.removeClass('editing'); 
        
    });
});