views:

171

answers:

2

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 EXISTING 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');

UPDATE////

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

this seems pretty straightforward but I'm getting an error back "unexpected end of file while searching for class name" (I have no clue what that means).

Whats 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...

+4  A: 

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');
  }
});
Nick Craver
lots of jQuery in the non-jQuery part :p
jAndy
@Nick - this isnt working for me. While troubleshooting I alerted the length of the div id of [name] but it never finds it.
sadmicrowave
@sadmicrowave - Can you post some example markup? It's fairly straightforward so should work pretty easily.
Nick Craver
@Nick - please see my OP with new updates
sadmicrowave
checking == 0 isn't necessary if($("#" + name).length) { } works just fine.
ScottE
@ScottE - That's the inverse though, you mean `!$("#"+name).length)` :)
Nick Craver
@sadmicrowave - Is that your exact code? You're missing a `");` on the end of that `.append()` line if so, see how your code format coloring is off?
Nick Craver
right, sorry nick, missed the !
ScottE
@Nick - sorry that wasnt my exact code I missed it when copying it to the window. Still having the specified problem....
sadmicrowave
any additional ideas from anyone?
sadmicrowave
@sadmicrowave - Can you post your complete code? You don't show where you're creating the `.mini-close` elements, so I have no idea if your selectors/traversings are correct or not.
Nick Craver
I don't know what I was doing wrong but I got it to work now which means your suggestion was valid. Thanks Nick!
sadmicrowave
+1  A: 

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
}
philo
you are right, this works great (I must have been doing something stupid). However when I replace the alert() with something else I get an error saying: "unexpected end of file while searching for class name". why is this happening? See my OP for what I'm replacing my alert() function with...
sadmicrowave
any additional ideas from anyone?
sadmicrowave