How to check if the element exists in a div?

Question

If i click on checkbox under activateUiHTML div , it is appending that particular div to an another div present inside My Orders div

However if i uncheck the checkbox and recheck the checkbox under activateUiHTML , it is adding the same elemnt to the My Orders div again .

This is my jsfiddle

http://jsfiddle.net/e56TY/40/

I tried to put this condition , but not sure if this is correct or not

if($('#addtoordersdiv'+id_attr_val).length > 0)
{

}

Answer 1

Fiddle

Add an additional condition after your fetch ID,

if ($(this).is(':checked')) {

    var id_attr_val = $(this).attr("id");
    if(!$('#addtoordersdiv'+id_attr_val).length){

         //append code

    }

.length returns 0 if element does not exists.

Alternative to !$(elem).length you can also use $(elem).length === 0

Answer 2

You can add the handler to the checkboxes inside the active div only like

$(document).on("click", ".activateUiHTML .checkboxclas", function (e) {
})

Answer 3

you can try this: http://jsfiddle.net/e56TY/43/

check if it already has the element or not:

if ($(this).is(':checked') && $("#ordersdiv").children('#addtoordersdiv'+id_attr_val).length==0) {...