javascript - 使用 Javascript 在 Div 中编辑和删除选项

Question

我有一个由多个 li 组成的 ul。现在我想在每个 li 前面添加 Edit 和 Delete 选项，以便可以在单击时对其进行编辑或删除。

我该怎么做？

提前感谢您的帮助:)

Answer 1

查看此 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;
});