删除由 jquery 创建的内容答案

【问题标题】：Removing content created by jquery删除由 jquery 创建的内容
【发布时间】：2014-03-30 20:42:52
【问题描述】：

（根据网上商店）

我想添加一个函数 remove，在其中我删除了使用 ajax 和 jquery 插入的整个条目，但它没有按我的意愿工作。

使用以下代码：

        $('#div').on('click', '.orderd', function() {
            $(this).remove();
        });

function UpdateTotal() {
            ToAddHTML = '<h1>Shopping cart</h1>';
            Totalprice = 0;
            for (var i = 0; i < orders.length ; i++) {
                var zoekresultaat = SubMenuItems.filter(function(v) {
                    return v.submenu_id === orders[i];
                })[0];
                Totalprice += parseFloat(searched.price);
                ToAddHTML += '';
            }
            ToAddHTML += ''
            $("#totalen").html(ToAddHTML);
        }

这可行，但是当我 console.log 数组“订购的物品”时，它仍然重复订购的物品。所以当我点击不同的项目时，“刚刚删除”的订单又会弹出来。

很难解释我目前的问题，但我希望我已经了解了足够多的信息！如有任何问题，请询问！生病更新我的问题！

【问题讨论】：

从 DOM 中删除，如果您想删除变量，请将其设置为空字符串
jQuery remove 函数只会删除匹配的 DOM 元素，它与任何类型的底层数据源无关。您应该从数组中手动删除底层数据项。
(according webshop) 是什么意思？
您是否尝试过创建一个带有问题演示的 jsfiddle？访问 jsfiddle.net
@j08691 所以你对我在说什么有了更多的了解

标签： javascript php jquery ajax webshop

【解决方案1】：

你应该从你的数组中删除有序的 id，并在删除一个项目时重新计算你的“篮子”。

// =======================================================================
// ! Functie maken die de totalen-lijst bijwerkt
// =======================================================================
function WerkTotalenBij() {
    ToeTeVoegenHTML = '<h1>Winkelmandje</h1>';
    Totaalprijs = 0;
    for (var i = 0; i < Bestellingen.length ; i++) {
        var zoekresultaat = SubMenuItems.filter(function(v) {
            return v.submenu_id === Bestellingen[i];
        })[0];
        Totaalprijs += parseFloat(zoekresultaat.price);
        // here I put a "data-itemid" attribute to keep a raw reference to the item id
        // this ID can be retrieved in the remove handler
        ToeTeVoegenHTML += '<div class=besteld id=nummer'+Bestellingen[i]+' data-itemid="'+Bestellingen[i]+'">'+'&euro;'+zoekresultaat.price+' '+zoekresultaat.title+'</br>(verwijder)</div><hr>';
    }
    ToeTeVoegenHTML += '<br/>Totale prijs per persoon :<br/> &euro; '+Totaalprijs+'<br/>Minimaal 10 personen<br/> Aantal personen:<input type=text width="10px" /><input type="button" value="Ik ben klaar!">';
    $("#totalen").html(ToeTeVoegenHTML);
}

$('#totalen').on('click', '.besteld', function() {
    var itemID = $(this).data("itemid");
    // remove the item ID from the array
    var index = Bestellingen.indexOf(itemID);
    if (index > -1) {
        Bestellingen.splice(index, 1);
    }        
    $(this).remove();
    // recalculate orders
    WerkTotalenBij();
});

但无论如何，这是您应该使用的典型工作，例如 knockout.js libaray，您可以将 DOM 元素直接绑定到您的数据，并且使用您的数据进行操作就足够了，GUI 将自动反映到变化。相信我，值得学习，你不会后悔的。

【讨论】：