CODEWITHSUNDEEP
javascriptjqueryhtml
Pablo Estrada
Pablo Estrada

Reputation: 3462

JQuery Remove not removing specified div

I have a small page on which you can add squares of different colors to a div with a button. After adding them, you can remove them by double clicking any of the squares created.

My code works well, when adding elements. However when I want to remove a square, I just get to remove one and after that I can´t make the element disappear on HTML even though the counter does decrease. I´m a doing something wrong with the remove() function? Right now I´m just focusing on the blue (Azul) color.

Here´s my code

https://jsfiddle.net/kdwyw0mc/

var azules = 0;

var rojos = 0;
var amarillos = 0;
var verdes = 0;
function 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]=='blue'){

        azules = azules -1;
    }
    else if(cuadro[0].classList[1]=='red'){

        rojos--;
    }
    else if(cuadro[0].classList[1]=='yellos'){

        amarillos--;
    }
    else if(cuadro[0].classList[1]=='green'){

        verdes--;
    }
    cuadro.remove();

    jQuery('#num-azules').text(azules);
    jQuery('#num-verdes').text(verdes);
    jQuery('#num-rojos').text(rojos);
    jQuery('#num-amarillos').text(amarillos);

}


function agregar(){
    jQuery('span#num-azules').val(azules);
    var numCuadros = jQuery("#numero").val();
    var color = $('#color option:selected').text();
    for( i = 0; i< numCuadros; i++){
        if(color=='Azul'){
            /*jQuery(".square").append(function(){
                return jQuery('<div class="square blue"> </div>').ondblclick(eliminar);

            })*/
            var newSquare = jQuery('<div class="square blue"> </div>')
            var a = jQuery(".squares").append(newSquare);
            newSquare.dblclick(function(){eliminar(newSquare);})
            azules += 1;
        }
        else if(color=='Rojo'){
            jQuery(".squares").append('<div class="square red"> </div>')
            rojos+= 1;

        }
        else if(color=='Amarillo'){
            jQuery(".squares").append('<div class="square yellow"> </div>')
            amarillos+= 1;

        }
        else if(color=='Verde'){
            jQuery(".squares").append('<div class="square green"> </div>')
            verdes+= 1;

        }

    }


    jQuery('#num-azules').text(azules);
    jQuery('#num-verdes').text(verdes);
    jQuery('#num-rojos').text(rojos);
    jQuery('#num-amarillos').text(amarillos);
}



/*
* jQuery("#agregar").click(function(){

 agregar();

 });

 VS

 jQuery("#agregar").click(agregar());
* */

jQuery('#num-azules').text(azules);
jQuery('#num-verdes').text(verdes);
jQuery('#num-rojos').text(rojos);
jQuery('#num-amarillos').text(amarillos);

jQuery("#agregar").click(function(){

    agregar();

});

HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles/reset.css"/>
    <link rel="stylesheet" href="styles/main.css"/>
</head>
<body>

<div class="main-content">

    <div class="toolbar">
        Numero Cuadrados: <input id="numero"type="text"/>
        <select id="color" name="color">
        <option value="azul">Azul</option>
        <option value="rojo">Rojo</option>
        <option value="amarillo">Amarillo</option>
        <option value="verde">Verde</option>
        </select>
        <button id="agregar">Agregar</button>

    </div>

    <div class="squares">



    </div>
    <div class="numeros">
        <p>Azules:    <span id="num-azules">0</span> </p>
        <p>Rojos:    <span id="num-rojos">0</span></p>
        <p>Verde:    <span id="num-verdes">0</span></p>
        <p>Amarillo: <span id="num-amarillos">0</span></p>



    </div>




</div>
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>

Upvotes: 1

Views: 367

Answers (1)

Trace
Trace

Reputation: 18889

This is an inefficient way of registering / listening to events, it is better to delegate the event handling to a wrapper (parent) container: 

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

on works for dynamically created elements; since the container was already in the DOM, it can continue listening to events coming from any other, newly created child element that has class .square.

http://api.jquery.com/on/

Edit:
One way of solving the counter problem would be to do something like this: 

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

Upvotes: 1

Related Questions