Javascript JQuery删除未删除指定的div

我有一个小页面，你可以在上面用按钮将不同颜色的方块添加到div中。添加它们后，可以通过双击创建的任何正方形来删除它们

我的代码在添加元素时运行良好。然而，当我想要删除一个正方形时，我只需要删除一个，然后我就不能让元素在HTML中消失，即使计数器确实减少了。我对remove（）函数做了一些错误的操作？现在我只关注蓝色（蓝色）

这是我的密码

var azules=0；
var-rojos=0；
var amarillos=0；
var verdes=0；
函数eliminar（cuadro）{
azules=parseInt（jQuery（'#num azules'）.text（）；
verdes=parseInt（jQuery（'#num verdes'）.text（）；
rojos=parseInt（jQuery（'#num rojos'）.text（）；
amarillos=parseInt（jQuery（'#num amarillos'）.text（）；
if（cuadro[0].classList[1]=“蓝色”）{
蓝斑=蓝斑-1；
}
else if（cuadro[0]。类列表[1]=“红色”）{
罗约斯--；
}
else if（cuadro[0]。类列表[1]='yellos'）{
阿马里洛斯——；
}
else if（cuadro[0]。类列表[1]=“绿色”）{
佛得斯--；
}
cuadro.remove（）；
jQuery（“#num azules”）.text（azules）；
jQuery（“#num verdes”）.text（verdes）；
jQuery（'#num rojos'）.text（rojos）；
jQuery（'#num amarillos'）.text（amarillos）；
}
函数agregar（）{
jQuery（'span#num azules'）.val（azules）；
var numCuadros=jQuery（“#numero”）.val（）；
var color=$（“#颜色选项：选定”）.text（）；
对于（i=0；i

HTML:

数字Cuadrados：
蓝色
罗霍
阿马里洛
佛得角
阿格雷戈
蓝色：0

罗霍斯：0

佛得角：0

阿马里洛：0

这是一种低效的事件注册/侦听方法，最好将事件处理委托给包装器（父）容器：

$("#container").on("dblclick", ".square", function(){ 
    $(this).remove(); 
)}; 

on

适用于动态创建的元素；由于容器已经在DOM中，它可以继续侦听来自任何其他新创建的子元素的事件，该子元素具有class

.square

编辑：
解决反问题的一种方法是这样做：

var StateObj = function(){
    this.counter = 0; 
    this.arrSquares = []; 

    this.increaseCounter = function(){ 
        this.counter += 1; 
    }, 

    this.decreaseCounter = function(){ 
        this.counter -= 1; 
    }, 

    this.addSquare = function(id, color){
        this.arrSquares.push({id: id, color: color}); 
    }, 

    this.getSquareById = function(id){ 
        return square = $.grep(this.arrSquares, function(){ return id == id; });            
    }
}

var stateObj = newStateObj(); 

$("#container").on("dblclick", ".square", function(e){ 
    $(this).remove(); 
    var id = $(e.currentTarget).attr("id"); 
    stateObj.increaseCounter(); 
    console.log(stateObj.counter); 
)}; 

---

您好，谢谢您的帮助，我想知道如何才能得到广场的颜色。正如您在函数eliminar（）中看到的，我检查颜色以决定应该减少哪个计数器。但是在这里我看不到将参数传递给这个函数的方法。谢谢你的帮助。所以我应该为每种颜色创建一个StateObj？我如何知道我应该删除4个对象中的哪一个？？你能在JSFIDLE中完成你的工作吗？你会根据需要得到回答。我添加了JS提琴。

$("#container").on("dblclick", ".square", function(){ 
    $(this).remove(); 
)}; 

var StateObj = function(){
    this.counter = 0; 
    this.arrSquares = []; 

    this.increaseCounter = function(){ 
        this.counter += 1; 
    }, 

    this.decreaseCounter = function(){ 
        this.counter -= 1; 
    }, 

    this.addSquare = function(id, color){
        this.arrSquares.push({id: id, color: color}); 
    }, 

    this.getSquareById = function(id){ 
        return square = $.grep(this.arrSquares, function(){ return id == id; });            
    }
}

var stateObj = newStateObj(); 

$("#container").on("dblclick", ".square", function(e){ 
    $(this).remove(); 
    var id = $(e.currentTarget).attr("id"); 
    stateObj.increaseCounter(); 
    console.log(stateObj.counter); 
)};