Question

简介

您好，我正在尝试为我的网站创建披萨表单。在此示例中，我希望客户能够创建和删除他们请求的任何项目。

问题

披萨形式几乎完全正常运作，除非添加的物品无法移除。我希望能够在订购商品的一侧移除物品。

的Javascript

public void GetClientsList()
    {
    BindingList<client> Clients = new BindingList<client>();

    try
    {
        using (smsdbmsEntities context = new smsdbmsEntities())
        {
            var query = (from r in context.clients.AsEnumerable()
                         select r).ToList();

            foreach (var x in query)
            {
                Clients.Add(x);
            }

            cb_ClientList.ItemsSource = Clients;

            cb_ClientList.DisplayMemberPath = "Name";
            cb_ClientList.SelectedValuePath = "CID";
        }
    }
    catch (Exception ex)
    {
        MessageBox.Show("Cannot get Clients! " + ex.ToString());
    }
}

HTML

var pizzas = [
    {name: "S - Pepperoni Pizza", price: "$4.99"},
    {name: "M - Pepperoni Pizza", price: "$5.15"},
    {name: 'L - Pepperoni Pizza', price: '$6.70'},
    {name: "S - Meat Lovers Pizza", price: "$4.99"},
    {name: "M - Meat Lovers Pizza", price: "$5.15"},
    {name: 'L - Meat Lovers Pizza', price: '$6.70'},
    {name: "S - Hawaiian Pizza", price: "$4.99"},
    {name: "M - Hawaiian Pizza", price: "$5.15"},
    {name: 'L - Hawaiian Pizza', price: '$6.70'},
];

function addPizza(index) {
    var pizza = pizzas[index];
    var name = pizza.name;
    var price = pizza.price;
    LISTname = document.createElement('li');
    LISTname.class = "item";
    LISTname.innerHTML = name;
    LISTprice = document.createElement('li');
    LISTprice.class = "price";
    LISTprice.innerHTML = price;
    document.getElementById("items").appendChild(LISTname);
    document.getElementById("price").appendChild(LISTprice);
}

Answer 1

正如人们所说，您可能会考虑使用库，但您也可以像这样简化它;

LISTname.addEventListener('click', function(){ 
    this.parentNode.removeChild(this);
}, false);
LISTprice.addEventListener('click', function(){ 
    this.parentNode.removeChild(this);
}, false);

// or with named function
function removeItem() {
    this.parentNode.removeChild(this);
}

LISTname.addEventListener('click', removeItem, false);
LISTprice.addEventListener('click', removeItem, false);

在此处详细了解addEventListener.

要修复

我想，你需要解决这些问题;

以前这些都成为全球性的var LISTname和LISTprice
这些用法不正确不是LISTname.class或LISTprice.class，应为LISTname.className和LISTprice.className

Answer 2

如果你想保留它，最简单的方法是在点击时删除项目。您添加一个事件侦听器，单击此按钮将删除您现在添加到列表中的项目：

 success: function (ExpressLibrary) { ... }
 //change to
 success: (ExpressLibrary) => { ... }
 // or, quite funny you mentioned it
 success: function (ExpressLibrary) { ... }.bind(this)

Answer 3

你也可以检查这些（但没有测试:)）;

程序风格;

function createItem(content, attributes) {
    var item = document.createElement("li");
    item.innerHTML = innerHTML;
    for (var key in attributes) {
        item.setAttribute(key, attributes[key]);
    }
    item.addEventListener("click", removeItem, false);
    return item;
}
function addItem(to, item) {
    document.getElementById(to).appendChild(item);
}
function removeItem(e) {
    e.target.parentNode.removeChild(e.target);
}
function addPizza(i) {
    var pizza = PIZZAS[i];
    if (!pizza) { 
        return alert("No pizza!"); 
    }
    addItem("items", createItem(pizza.name, {"className": "item"}));
    addItem("price", createItem(pizza.price, {"className": "price"}));
}

OOP风格;

function Pizza(pizzas) {
    this.pizzas = pizzas;
}

Pizza.prototype = {
    createItem: function(content, attributes) {
        var item = document.createElement("li");
        item.innerHTML = innerHTML;
        for (var key in attributes) {
            item.setAttribute(key, attributes[key]);
        }
        item.addEventListener("click", this.removeItem, false);
        return item;
    },
    addItem: function(to, item) {
        document.getElementById(to).appendChild(item);
    },
    removeItem: function(e) {
        e.target.parentNode.removeChild(e.target);
    },
    addPizza: function(i) {
        var pizza = this.pizzas[i];
        if (!pizza) { 
            return alert("No pizza!"); 
        }
        this.addItem("items", this.createItem(pizza.name, {"className": "item"}));
        this.addItem("price", this.createItem(pizza.price, {"className": "price"}));
    }
}

var pizza = new Pizza(PIZZAS);
pizza.addPizza(1);

JavaScript创建并删除＆＃34; li＆＃34;标签

3 个答案: