Question

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

我该怎么做？

在预先感谢任何帮助：）

Answer 1

您可以使用CSS技巧在范围内执行inplace edit，并使用jQuery#remove()删除li's。

想法是在点击Edit时隐藏文字，并在点击textbox时显示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

我强烈建议您使用 Jquery 或其他library来处理跨浏览器问题。无论如何，这里是纯javascript的解决方案...它应该适用于所有modern browsers最新版本。

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：每个li元素中不需要class="lead justified"。您可以使用 CSS 规则，如下所示：

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

Answer 3

请参阅 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>...

功能edit(this)输入错误，this链接到<a>Edit</a>。您应该将id属性添加到<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

您需要更改标记中的一些更改，您可以使用<div>代替<span>并可以应用HTML5的属性contenteditable

样本标记

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

<强>脚本

修改的

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

删除的

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

Fiddle Demo

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

5 个答案:

SOLUTION DEMO

HTML

JS