单击时使用 jquery 清除列表答案

【问题标题】：Clear list with jquery on click单击时使用 jquery 清除列表
【发布时间】：2018-06-19 08:13:49
【问题描述】：

我有两个列表。第一个有一些项目，点击其中一个应该显示另一个列表。每次单击第一个项目时，该列表都应该更改，因为它还有其他数据。例如：在工作订单列表中，当我单击它时，我想显示属于相关工作订单的用户。我现在可以这样做，但我无法清除列表。代码如下：

var refreshList = function(id) {
  // ..Ajax service..
  $.get("request",
        {
    id: id
  }, function(obj) {
    $("#userList").empty();
    var $ul = $( '<ul id="userList" class="list-group">' );
    for(var i=0; i<obj.length; i++) {
      $ul.append('<li class="list-group-item">'+ obj[i].description + '</li>');
    }
    $ul.appendTo( '#userListContainer' );
  });
}

这是在第一个列表的项目中触发onclick="" 的服务。它发出一个 ajax 请求，它返回一个对象数组并创建第二个列表。使用$("#userList").empty(); 我可以清除列表，但DOM 仍然会在我每次单击一个项目时创建<ul> 标记。是否可以只清除列表并用新数据替换它？

【问题讨论】：

使用remove 而不是empty。或者不要每次都创建新的ul。

标签： javascript jquery html ajax list

【解决方案1】：

一个文档中具有相同 ID 的多个元素是无效的 HTML。同样，您每次都在创建一个新的ul。为什么不在清空后将新的lis 附加到现有 ul，而不是一个全新的ul？

var refreshList = function(id) {
  // ..Ajax service..
  $.get("request", {
    id: id
  }, function(obj) {
    var $ul = $("#userList"); // ensure it already has class="list-group"
    $ul.empty();
    for (var i = 0; i < obj.length; i++) {
      $ul.append('<li class="list-group-item">' + obj[i].description + '</li>');
    }
    // no need to append the ul, should already be appended
  });
}

或者，使用更现代的语法并且只对 DOM 进行一次appending：

var refreshList = function(id) {
  $.get("request", {
    id: id
  }, function(obj) {
    var $ul = $("#userList");
    $ul.empty();
    $ul.append(
      obj.map(({ description }) => `<li class="list-group-item">${description}</li>`).join('')
    );
  })
}

【讨论】：

我尝试了两种解决方案。我对第二个有一些问题，但第一个效果很好。太感谢了。我习惯于使用 AngularJs 和它的双向数据绑定来做这种事情。更容易海事组织。谢谢

【解决方案2】：

您可以使用html() 或innerHtml 而不是appendTo()

var refreshList = function(id) {
  // ..Ajax service..
  $.get("request",
        {
    id: id
  }, function(obj) {
    //$("#userList").empty();
    var $ul = $( '<ul id="userList" class="list-group">' );
    for(var i=0; i<obj.length; i++) {
      $ul.append('<li class="list-group-item">'+ obj[i].description + '</li>');
    }
    $('#userListContainer').html($ul);
  });
}

或者如果你想使用appendTo()，那么在追加之前删除userList，使用.remove()

var refreshList = function(id) {
  // ..Ajax service..
  $.get("request",
        {
    id: id
  }, function(obj) {
    //$("#userList").remove();
    var $ul = $( '<ul id="userList" class="list-group">' );
    for(var i=0; i<obj.length; i++) {
      $ul.append('<li class="list-group-item">'+ obj[i].description + '</li>');
    }
    $ul.appendTo( '#userListContainer' );
  });
}

【讨论】：