How to find if div with specific id exists in jQuery?

How to find if div with specific id exists in jQuery?

I’ve got a function that appends a

to an element on click. The function gets the text of the clicked element and assigns it to a variable called name. That variable is then used as the

id of the appended element.
I need to see if a

id with name already exists before I append the element but I don’t know how to find this.
Here is my code:
$(“li.friend”).live(‘click’, function() {
name = $(this).text();

// if-statement checking for existence of

should go here
// If

does not exist, then append element
$(“div#chatbar”).append(“

” + name + “

“);

// Else
alert(‘this record already exists’);
});

This seems pretty straightforward but I’m getting the error “Unexpected end of file while searching for class name”. I have no clue what that means.
if (document.getElementById(name)) {
$(“div#” + name).css({bottom: ’30px’});
} else {
$(“div#page-content div#chatbar”).append(“

” + name + “

“);
}

What’s more is that I want to be able to delete this element if I close it out which should then remove the div id [name] from the document but .remove() does not do this.
Here is the code for that:
$(“.mini-close”).live(‘click’, function(){
$(this).parent().remove();
});

Related:  Set custom HTML5 required field validation message

I added .mini-close to the append function as a child of .labels so there was a way to close out of the appended

if needed. After clicking .mini-close and attempting to click the same name again from li.friends it still finds the div id [name] and returns the first part of my if statement.

Solutions/Answers:

Solution 1:

You can use .length after the selector to see if it matched any elements, like this:

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

The full version:

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

Or, the non-jQuery version for this part (since it’s an 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');
  }
});

Solution 2:

Nick’s answer nails it. You could also use the return value of getElementById directly as your condition, rather than comparing it to null (either way works, but I personally find this style a little more readable):

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

Solution 3:

Try to check the length of the selector, if it returns you something then the element must exists else not.

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 the first if condition for id and the 2nd one for class.

Related:  What are the actual uses of ES6 WeakMap?

Solution 4:

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

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

Solution 5:

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

}

Another shorthand way:

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

Solution 6:

You can check by using jquery simply like this:

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