Question

我正在构建一个简单的Grocery List App，我在尝试删除占位符div元素时遇到问题。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Grocery List App</title>
        <link type="text/css" href="style/form.css" rel="stylesheet"/>
    </head>
    <body>
        <div id="container">
        <div id="left_side">
            <div id="to_buy">To Buy:</div>
        </div>

        <div id="right_side">
            <div id="in_cart">In Cart:</div>
        </div>
        </div>
        <input type="text" id="item_body" placeholder="Type Item to Add">

        <script src="scripts/jquery-1.11.2.min.js"></script>
        <script src="scripts/grocery.js"></script>
        <script src="scripts/jquery-ui/jquery-ui.js"></script>
    </body>
</html>

JS

    $(function () {
    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"
        });

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


    });

});

CSS

    #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;
}

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

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

被调用，首先删除一个div，然后在下一次双击两个，然后是四个等等。显然，它被多次调用或者其他东西出错了。

Answer 1

这是因为您在每个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();
});

另请注意，将双击事件委派给父容器#left_side是有意义的，这样您就不必担心在事件注册时存在元素。

以下是演示：http://jsfiddle.net/hx11gkcj/

无法一次删除一个孩子DIV

1 个答案: