Javascript 一次删除一个子DIV时出现问题

我正在构建一个简单的杂货店列表应用程序，在尝试删除PlaceHolder div元素时遇到问题

HTML

因此，屏幕在“to_buy”和“in_cart”之间垂直分割。当我将一个项目添加到“to_buy”时，我还将一个“dummy”div添加到“in_cart”，以便双方保持平衡。但是，当我双击以删除项目时

$('#in_cart > div:first').remove();

---

被调用时，首先删除一个div，然后在下一次双击时删除两个div，然后删除四个div等等。显然，它被调用了多次，或者出现了其他问题。

这是因为您在每次按Enter键时都为双击事件绑定事件处理程序，因此它们在每次添加项时都会成倍增加。只需将dblclick注册移到外部：

var rmv = false;
$('#item_body').keydown(function (e) {
    if (e.keyCode == 13) {
        var add = $('#item_body').val();
        $("#to_buy").append('<div class="draggable_item">' + add + '</div>');
        $("#in_cart").append('<div class="holder"></div>');
    }
    $(".draggable_item").draggable({
        axis: "x"
    });
});

$("#left_side").on("dblclick", ".draggable_item", function () {
    this.remove();
    $('#in_cart > div:first').remove();
});

var rmv=false；
$（“#项_体”）.keydown（函数（e）{
如果（e.keyCode==13）{
var add=$（“#项_体”）.val（）；
$（“#购买”）。附加（“”+add+“”）；
$（“#在购物车中”）。附加（“”）；
}
$（“.draggable_项”）.draggable({
轴：“x”
});
});
$（“#左侧”）。在（“dblclick”，“.draggable_项”，函数（）上{
这个。删除（）；
$（'in_cart>div:first'）。删除（）；
});

还请注意，将双击事件委托给父容器

#左侧

是有意义的，这样您就不必担心事件注册时是否存在元素

---

这里是一个演示：

，因为每次调用keydown处理程序时，您都会设置一个dblclick处理程序。您不应该使用这样的嵌套处理程序。谢谢dfsq，我非常感谢您提供的快速准确的帮助！干杯

    #to_buy {
    float:left;
    width: 50%;
    height: 100%;
    color: #00E5EE;

}
#in_cart {
    float: left;
    width: 49%;
    height: 100%;
    color: #00E5EE;

}

#container {
    width:100%;
    height: 100%;

}

#left_side {
    height: 100%;
    width: 50%;
    float:left;
    background: #5D5851;
}

#right_side {
    height: 100%;
    width: 50%;
    float: left;
    background: #6D5D4D;

}

#item_body {
    float:left;
    clear:both;
    color: #326B62;
}


body {
    background: #B1ADA5;
}

.draggable_item {
    color: #FFF;
}

.holder {
   height: 20px;
}

$('#in_cart > div:first').remove();

var rmv = false;
$('#item_body').keydown(function (e) {
    if (e.keyCode == 13) {
        var add = $('#item_body').val();
        $("#to_buy").append('<div class="draggable_item">' + add + '</div>');
        $("#in_cart").append('<div class="holder"></div>');
    }
    $(".draggable_item").draggable({
        axis: "x"
    });
});

$("#left_side").on("dblclick", ".draggable_item", function () {
    this.remove();
    $('#in_cart > div:first').remove();
});