使用jquery从<ol>中删除<li>

Question

我有一个有序列表

<ol id="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>

用户可以通过单击将值附加到上面的列表中。用户想要从列表中删除值。决定要删除的值输入到输入字段中。我能想出来

 $("#btn2").click(function(){
   var delitem = $(".Remove").val();
   $("#list").remove($("<li>").text(delitem));
 });

但这不起作用。使用jquery删除有序列表中的列表项的最佳方法是什么？

Answer 1

将使用:contains

匹配包含删除文字的内容

$("#btn2").click(function(){
  var delitem = $(".Remove").val();
  $("#list > li:contains(" + delitem + ")").remove();
});

仅匹配使用filter

的完全删除文字

$("#btn2").click(function(){
  var delitem = $(".Remove").val();
  $("#list li").filter(function(){
    return $(this).text() === delitem;
  }).remove();
});

Answer 2

使用filter()方法按其文字内容过滤掉li，然后将其删除。

$("#btn2").click(function(){
  var delitem = $(".Remove").val();
  $("#list li").filter(function(){
    return $(this).text() == delitem;
  }).remove();
});

仅供参考：如果不需要完全匹配，那么您可以使用:contains()伪类选择器，它比过滤器快得多。

$("#btn2").click(function(){
  var delitem = $(".Remove").val();
  $('#list li:contains('+ delitem +')').remove();
});

Answer 3

您可以使用filter()

$("#btn2").click(function(){
    var delitem = $(".Remove").val();
    $("#list li").filter(function(){
        return $(this).text() === delItem;
    }).remove();
 });

您的代码实际上是在创建一个新元素，该元素在dom中不存在甚至被删除

Answer 4

您可以使用.filter()

 $("#list li").filter(function(){
    return this.textContent.trim()  === delitem;
 }).remove()

Answer 5

您可以使用包含其自己的索引变量.each()的{​​{1}}方法来跟踪循环经过的迭代次数。

工作示例：

i

$(document).ready(function(){

    $('button').click(function(){
        $('#list li').each(function(i){
            if ($('input').val() === $(this).text()) {
                $('#list li').eq(i).remove();
            }
        });
    });
});