jQuery inconsistent .remove by class on element with multiple classes

Question

I've got a page where messages and associated elements (responses, forwards, etc) all share a class based on the database id of the parent.

For example

<pre>
<div id="recentMessages">
 <div id="a3" class="message a3">this is a message</div>
    <div id="a5" class="message a5">this is another message</div>
</div>
<div id="recentComments">
    <div id="a3" class="comment a3">this is a comment</div>
    <div id="a5" class="comment a5">this is another comment</div>
</div>
<div id="recentActions">
    <div id="a3" class="action a3">tim posted a new message</div>
    <div id="a4" class="action a4">sara forwarded a message to john</div>
</div>
</pre>

at times I need to remove all elements with the same id, so I originally had

    jQuery('div#'+id).remove();

but that would sometimes not remove all the ids because ids are supposed to be unique. So I added the id as a class. now I use

   jQuery('div.'+id).remove();

but this seems to be about 80% effective, and sometimes the divs aren't being removed. I'm not sure if the issue is because the div has more than one class, but I need the classes because that is how I refer to the elements when somebody clicks. For instance,

jQuery('div.message').click(function(){
     get the id, send it to the server and get the message
 });

is there something wrong I'm doing here? or is there a better way to do this?

Answer 1

Looks like this was an issue where a function was being called using a variable which had already been defined. I didn't realize this would cause a problem. for instance

jQuery('div','div#recentActions').click(function(){
   var removeId=jQuery(this).attr('id').replace('','a');
  removeDiv(removeId);
});

function removeDiv(removeId){
   jQuery('div#a'+removeId).remove();
}

I can't say for sure this was the issue, but changing the function to

function removeDiv(cancelId){
jQuery('div#a'+canceld).remove();
}

seems to be working