Question

Sorry if the title was confusing, i could not think of something better. Basically, what i want to do is straight forward. This is my code

jQUery('.button1').click(function() {
    jQuery(".box1").slideUp();
    jQuery(this).remove();
});
jQUery('.button2').click(function() {
    jQuery(".box2").slideUp();
    jQuery(this).remove();
});
jQUery('.button3').click(function() {
    jQuery(".box3").slideUp();
    jQuery(this).remove();
});

and so on….
Now that’s pretty much a mess when i have more boxes. Is there any way i can combine them all and let jquery do the ID numbers?

Answer 1

You can set class name for buttons (e.g. "buttons") and use ID:

<button id="button1" class="buttons">Delete</button>

Then, you can make some trick to get the number from the ID:

$(".buttons").on("click", function() {
    var n = this.id.replace("button", "");
    $(".box" + n).slideUp();
    $(this).remove();
});

DEMO: http://jsfiddle.net/DXzKu/