jQuery列表项删除

Question

我在几分钟前写了这段代码，我想知道为什么不删除这个项目。

(function($) {
  $('#btn1').click(function() {
    var textVal = $('#input').val();
    if (textVal != "") {
      $('#list').append('<li class="class1" id="' + textVal + '">' + textVal + '<input type="hidden" name="Tags" value="' + textVal + '" /> <input type="button" class="remove-item" value="X"></input></li> ');
    }
  });
  $('.remove-item').click(function () {
    $('.list #' + textVal).remove()
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="input" type="text" />
<input type="button" id="btn1" value="Add" />
<ul id="list"></ul>

Answer 1

您需要在.on()上添加body并检查点击的课程是.remove-item还是remove()。

＆＃13;

＆＃13;

(function($) {
  $('#btn1').click(function() {
    var textVal = $('#input').val()
    if (textVal != "") {
      $('#list').append('<li class="class1" id="' + textVal + '">' + textVal + '<input type="hidden" name="Tags" value="' + textVal + '" /> <input type="button" class="remove-item" value="X"></input></li> ');
    }
  });
  $('body').on('click', '.remove-item', function(e) {
    $(this).parent().remove()
  });
})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text" />
<input type="button" id="btn1" value="Add" />

<ul id="list">
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这段代码：

  var textVal;
    $('#btn1').click(function(){
    		textVal = $('#input').val()
        if (textVal != ""){
 $('#list').append('<li class="class1" id="' + textVal + '">' + textVal + '<input type="hidden" name="Tags" value="' + textVal + '" /> <input type="button" class="remove-item" id='+textVal+' value="X"></input></li> ');
          
    $('#'+ textVal +' .remove-item' ).click(function (e){
    $(e.target).parent().remove();
    });
          
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text" />
    <input type="button" id="btn1" value="Add" />

    <ul id="list">
    </ul>

此外，我建议使用Backbone.js（基于MVC）进行此类应用

Answer 3

请检查一下。无需抓取text获取当前li。相反，您可以搜索父li，并可以按如下方式将其删除：

(function($) {
  $('#btn1').click(function() {
    var textVal = $('#input').val()
    if (textVal != "") {
      $('#list').append('<li class="class1" id="' + textVal + '">' + textVal + '<input type="hidden" name="Tags" value="' + textVal + '" /> <input type="button" class="remove-item" value="X"></input></li> ');
    }
  });


  $("#list").on('click', '.remove-item', function() {
    $(this).closest("li").remove()

  });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text" />
<input type="button" id="btn1" value="Add" />

<ul id="list">
</ul>