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

by

I’ve got a function that appends a <div> 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 <div> id of the appended element.

I need to see if a <div> 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 <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');
});

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("<div class="labels">" + name + "</div><div id='" + name + "'></div>");
}

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

I added .mini-close to the append function as a child of .labels so there was a way to close out of the appended <div> 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.

10 Answers
10

Leave a Comment