如何使用jquery在ul标签内删除和添加li元素答案

【问题标题】：How to delete and add an li element inside a ul tag with jquery如何使用jquery在ul标签内删除和添加li元素
【发布时间】：2013-11-06 10:33:34
【问题描述】：

我有下面的html代码

<ul class="sales_details clearfix">
    <li class="blue_disc">
        <a id="product_detail" href="">Som stuff</a> 
        <span id="product_revenue">$45</span> 
   </li>
</ul>
<input  class="update" type="button">

而我的jquery 代码是

$(document).ready(function () {
    $('.update').click(function() {
        var array_list = response_list; // I will get response_list from somewhere as list of dictionaries
        $.each(array_list, function (i, item) {
            href = "/products/" + item.products__id + "/"
            $('#product_detail').attr('href', href).html(item.products__name);
            $('#product_revenue').html(item.revenue);
        });
    });
});

因此，当从我上面的 html 和 jquery 代码中，li element 类 blue_disc 正在更新，但值被覆盖，因此我只能看到一条记录为 li

例如我的array_list 如下：

[{'products__name':'One', 'revenue':'45'},
{'products__name':'two', 'revenue':'32'},
{'products__name':'three', 'revenue':'35'}]

我只能看到一个带有product__name : three 数据的li 元素，

所以我想做的是

首先删除类blue_disc的li element（因为默认情况下我会显示一些数据）
按照上面的详细信息创建一个 li 元素，

那么如何

删除带有类的li element
如何在ul 之后更新元素，类sales_details 如上所述？

【问题讨论】：

这段代码不可能做任何有用的事情。 $('.update').click(){ 应该是 $('.update').click(function(){，不是吗？
对不起……打错了……，但我需要实现上面的功能

标签： jquery html-lists add

【解决方案1】：

首先，您的click 语法错误。其次，您正在更新现有元素的属性，而不是在循环中创建任何新元素。试试这个：

$('.update').click(function () {
    $('.sales_details').empty();

    var array_list = response_list;
    $.each(array_list, function (i, item) {
        var $li = $('<li />').appendTo('.sales_details');

        $('<a />', {
            'href': "/products/" + item.products__id + "/",
            'text': item.products__name
        }).appendTo($li);

        $('<span />', {
            'text': '$' + item.revenue
        }).appendTo($li);
    });
});

Example fiddle

【讨论】：

【解决方案2】：

首先，您的 HTML 需要更改。如果您想拥有多个lis，那么您不能在其中包含具有相同id 的元素。这会导致无效的 DOM 和各种令人头疼的问题。

回答您的问题：

要删除具有特定类的所有元素，请执行$('li.blue_disc').remove()。

要创建新元素并将它们附加到ul，请执行以下操作...

$('.update').click(function() {
    // remove the current li.blue_disc elements
    $('li.blue_disc').remove();

    $.each(array_list, function (i, item) {
        // create the li
        var li = $('<li class="blue_disc"/>'); 

        // add the link
        li.append('<a class="product_detail" href="' + 
                  item.products__id +
                  '">Som stuff</a>'
        );

        // add the span
        li.append('<span class="product_revenue">$' +
                  item.revenue +
                  '</span>'
        );

        // add the li to the ul
        $('.sales_details').append(li);
    });
});

【讨论】：