Question

I am using jQuery to allow my users to quickly go through their profiles. They have an inbox on their profiles and I am letting them delete past messages using jQuery. The problem is that each time the page is loaded there will be a different number of emails. How can I tell jQuery to manage the function for mail1 and mail2 and mail 3 etc but only if they exists.

Below you will see the jquery I am running for each but there needs to be a loop of some kind.

$(document).ready(function() {
  $("#del1").click(function() {
    $(".mail1").fadeOut();
  });
});

$(document).ready(function() {
  $("#del2").click(function() {
    $(".mail2").fadeOut();
  });
});

Answer 1

You should make your elements and code more generic. For instance, give all delete links the same class, lets say deleteButton and all mails the same class, say mail.

Then use their proximity to deal with them. Maybe something like this:

$(".deleteButton").click(function(){
   $(this).parent().find(".mail").fadeOut();
});

This assumes that the button and the mail share a common parent, but even if they don’t, something similar can be done.