Edit and Delete option in Div Using Javascript

Question

I have a ul consisting of several li's in it. Now I wanted to add Edit And Delete option infront of every li so that it can be Edited or Deleted on click.

How can i do this ?

Thanks in Advance for any help :)

Answer 1

You can use CSS trick to perform inplace edit on span's and jQuery#remove() for deleting li's.

Idea is to hide the text when Edit is clicked and show textbox and vice-versa on click of Delete.

$('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'); 

});

Fiddle DEMO

Answer 2

I strongly suggest you use Jquery or another library to handle cross browser issues. Anyway, here is the solution with pure javascript... it should work in all modern browsers recent versions.

SOLUTION DEMO

HTML

<ul class="fa-ul">
  <li>
    <span> BE/ BTech/ MCS </span>
    <button class="remove">Delete</button>
    <button class="edit">Edit</button>
  </li>
  <li>
    <span> Solid </span>
    <button class="remove">Delete</button>
    <button class="edit">Edit</button>
  </li>
  <li>
    <span> Strong </span>
    <button class="remove">Delete</button>
    <button class="edit">Edit</button>
  </li>
  <li>
    <span> Sharp </span>
    <button class="remove">Delete</button>
    <button class="edit">Edit</button>
  </li>
  <li>
    <span> Ability</span>
    <button class="remove">Delete</button>
    <button class="edit">Edit</button>
  </li>
  <li>
    <span> Deal problems</span>
    <button class="remove">Delete</button>
    <button class="edit">Edit</button>
  </li>
  <li>
    <span> Strong </span>
    <button class="remove">Delete</button>
    <button class="edit">Edit</button>
  </li>
  <li>
    <span> Excellent </span>
    <button class="remove">Delete</button>
    <button class="edit">Edit</button>
  </li>
</ul>

JS

var removeClassElements = document.getElementsByClassName('remove');

for(var i = 0; i < removeClassElements.length; i++){
  var element = removeClassElements[i];  
  element.addEventListener('click', remove);
}

var editClassElements = document.getElementsByClassName('edit');

for(var i = 0; i < editClassElements.length; i++){
  var element = editClassElements[i];  
  element.addEventListener('click', edit);
}

function remove() {
  var li = this.parentNode;
  var ul = li.parentNode;  
  ul.removeChild(li);
}

function edit() {
  var li = this.parentNode;
  var span = li.children[0];
  span.setAttribute('contenteditable', true);
  span.focus();
}

PS: You don't need class="lead justified" in each li element. You can use a CSS rule like this:

.fa-ul li span:first-child {...}

Answer 3

See this DEMO

$('ul li').each(function () {
    $(this).append('<a class="delete" href="#">Delete</a>  <a href="#" class="edit">Edit</a>')
});
$('ul li a.delete').on('click', function () {
    $(this).parent().remove();
    return false;
});
$('ul li a.edit').on('click', function () {
    var val = $(this).siblings('span').html();
    if (val) {
        $(this).parent().prepend('<input type="text" class="txt" value="' + val + '" />');
        $(this).siblings('span').remove();
        $(this).html('Update');
    } else {
        var $txt = $(this).siblings().filter(function() { return $(this).hasClass('txt') });
        $(this).parent().prepend('<span class="lead justified">' + $txt.val() + '</span>');
        $txt.remove();
        $(this).html('Edit');
    }
    return false;
});

Answer 4

<ul class="fa-ul">
  <li><span class="lead justified"> BE/ BTech/ MCS </span><a href="#" onclick="remove()">Delete</a><a href="#" onclick="edit(this)">Edit</a></li>...

The function edit(this) is given incorrectly and this links to <a>Edit</a>. You should add id property to the <span>.

<li><span class="lead justified" id="foo"> BE/ BTech/ MCS </span><a href="#" onclick="remove()">Delete</a><a href="#" onclick="edit(foo)">Edit</a></li>

<script>
function edit(target) {
     target.contenteditable = true;
}
</script>

Answer 5

You need do change some changes in your markups, You can take <div> instead of <span> and can apply HTML5's attribute contenteditable

Sample Markup

<li>
    <div class="lead justified">BE/ BTech/ MCS</div>
    <a href="#" onclick="remove(this)">Delete</a>
    <a href="#" onclick="edit(this)">Edit</a>
</li>

Script

Edit

function edit(elem){
    $(elem).siblings('div.lead').attr('contenteditable',true);
}

Delete

function remove(elem){   
    $(elem).closest('li').remove(); // Deletes li
    return false;
}

Fiddle Demo