¿Cómo encontrar si div con id específico existe en jQuery?

Tengo una función que agrega <div>a un elemento al hacer clic. La función obtiene el texto del elemento seleccionado y lo asigna a una variable llamada name. Esa variable se usa como la <div> iddel elemento adjunto.

Necesito ver si ya existe un <div> idcon nameantes de agregar el elemento, pero no sé cómo encontrarlo.

Aquí está mi código:

$("li.friend").live('click', function() {
  name = $(this).text();

  // if-statement checking for existence of <div> should go here
  // If <div> does not exist, then append element
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");

  // Else
    alert('this record already exists');
});

Esto parece bastante sencillo, pero recibo el error " Fin inesperado del archivo al buscar el nombre de la clase" . No tengo idea de lo que eso significa.

if (document.getElementById(name)) {
  $("div#" + name).css({bottom: '30px'});
} else {
  $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}

Además, quiero poder eliminar este elemento si lo cierro, lo que debería eliminarlo div id [name]del documento pero .remove()no lo hace.

Aquí está el código para eso:

$(".mini-close").live('click', function(){
  $(this).parent().remove();
});

Agregué .mini-closea la función append como hijo de, .labelspor lo que había una manera de cerrar el anexo <div>si fuera necesario. Después de hacer clic .mini-closee intentar hacer clic en el mismo nombre nuevamente li.friends, aún encuentra el div id [name]y devuelve la primera parte de mi ifdeclaración.

Puede usar .lengthdespués del selector para ver si coincide con algún elemento, como este:

if($("#" + name).length == 0) {
  //it doesn't exist
}

La versión completa:

$("li.friend").live('click', function(){
  name = $(this).text();
  if($("#" + name).length == 0) {
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");
  } else {
    alert('this record already exists');
  }
});

O, la versión que no es jQuery para esta parte (ya que es una ID):

$("li.friend").live('click', function(){
  name = $(this).text();
  if(document.getElementById(name) == null) {
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");
  } else {
    alert('this record already exists');
  }
});

La respuesta de Nick lo clava. También puede usar el valor de retorno de getElementById directamente como su condición, en lugar de compararlo con nulo (de cualquier manera funciona, pero personalmente encuentro que este estilo es un poco más legible):

if (document.getElementById(name)) {
  alert('this record already exists');
} else {
  // do stuff
}

Intente verificar la longitud del selector, si le devuelve algo, entonces el elemento debe existir de otra manera.

if( $('#selector').length )         // use this if you are using id to check
{
     // it exists
}


if( $('.selector').length )         // use this if you are using class to check
{
     // it exists
}

Use la primera condición if para id y la segunda para clase.

if($("#id").length) /*exists*/

if(!$("#id").length) /*doesn't exist*/

if ( $( "#myDiv" ).length ) {
    //id id ( "#myDiv" ) is exist this will perform
    $( "#myDiv" ).show();

}

Otra forma abreviada:

    $( "#myDiv" ).length && $( "#myDiv" ).show();

Puede verificar usando jquery simplemente así:

if($('#divId').length!==0){
      Your Code Here
}

La forma más simple es ...

if(window["myId"]){
    // ..
}

Esto también es parte de las especificaciones HTML5: https://www.w3.org/TR/html5/single-page.html#accessing-other-browsing-contexts#named-access-on-the-window-object

window[name]
    Returns the indicated element or collection of elements.

Aquí está la función jQuery que uso:

function isExists(var elemId){
    return jQuery('#'+elemId).length > 0;
}

Esto devolverá un valor booleano. Si el elemento existe, devuelve verdadero. Si desea seleccionar un elemento por nombre de clase, simplemente reemplace #con.

Puedes manejarlo de diferentes maneras,

Objetivo es verificar si el div existe y luego ejecutar el código. Sencillo.

Condición:

$('#myDiv').length

Nota:

#myDiv -> < div id='myDiv' > <br>
.myDiv -> < div class='myDiv' > 

Esto devolverá un número cada vez que se ejecute, por lo que si no hay div, dará un cero [0], y como no 0 puede representarse como falso en binario para que pueda usarlo en la instrucción if. Y puedes usarlo como una comparación con un número ninguno. mientras que hay tres declaración dada a continuación

// Statement 0
// jQuery/Ajax has replace [ document.getElementById with $ sign ] and etc
// if you don't want to use jQuery/ajax 

   if (document.getElementById(name)) { 
      $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
    }

// Statement 1
   if ($('#'+ name).length){ // if 0 then false ; if not 0 then true
       $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
    }

// Statement 2
    if(!$('#'+ name).length){ // ! Means Not. So if it 0 not then [0 not is 1]
           $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>"); 
    }
// Statement 3
    if ($('#'+ name).length > 0 ) {
      $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
    }

// Statement 4
    if ($('#'+ name).length !== 0 ) { // length not equal to 0 which mean exist.
       $("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
    }

ingrese la identificación que desea verificar en jquery is method.

var idcheck = $("selector").is("#id"); 

if(idcheck){ // if the selector contains particular id

// your code if particular Id is there

}
else{
// your code if particular Id is NOT there
}