How to remove all elements with the same class

Question

So I have a system were the user of the site can create div's and all these div's get different class names, with all these div's there will also be created a delete button with the same class. How do you remove the button and the div with the same class on click on the button.

I figure'd it would be something like this:

$("div.Test").remove();

only than with a this tag.

Collectivism

And what does the code that creates these elements look like ? – Obedient

Answer 1

Within the click event of your button:

var thisClass = $(this).attr("class");
$('div.' + thisClass).remove();

Accepter

Exactly how would you write the click event of the dynamically created button. would you assume he has no other buttons on the page and attach it to all buttons? – Faustinafaustine

Assuming he has the event binding already figured out. One way would be to give all of the buttons a common class, then bind the event to that class. – Accepter

Yeah I already figured out that part, just was struggling with the $(this).attr part – Collectivism

OK, the code above doesn't remove the button as requested. However, adding a $(this).remove(); in the click handler will remove the button as well. – Faustinafaustine

That's true. I read the question as the button being contained within the div to be removed, which would make explicitly removing the button unnecessary. As stated, $(this).remove() gets rid of the button, if needed. – Accepter

Answer 2

$("button").click(function(){

   $("div."+$(this).attr('class')).remove();
   // $("."+$(this).attr('class')).remove(); to remove both button and div

});

Assuming button has just a single class name that too match with the class name of the div.

Wilkinson

This assumes that there are no other buttons on the page except the ones that were added dynamically by the user when creating the divs. It also doesn't remove the button itself as requested by the OP. But if you add a $(this).remove() how many buttons will you be removing? – Faustinafaustine

1. "button" can be easily replace by any selector. 2. Look at the comment i have mentioned in answer. – Wilkinson

Answer 3

You need a way of selecting all the buttons. I would create the buttons with a class that you can use for access and use a data attribute to hold the class of the divs to remove. like this:

<button class="remove-btn" data-remove="div-class">Remove</button>

Then you can do something like this:

$(function(){
    $('.remove-btn').on("click", (function(){
        var remove = $(this).data('remove');
        $('.' + remove).remove();
        $(this).remove();
    });
});

Faustinafaustine

Answer 4

First you need to get the class of the button you clicked, then find the div with the same class and remove it. Later, just remove the button you clicked on:

$("#your-button-id").click(function() {
    var className = $(this).attr('class'); // find the button class
    $('div.' + className).remove(); // remove the div with the same class as the button
    $(this).remove(); // remove the button
});

Angelita

Except that the buttons are created dynamically along with the div so the OP doesn't know the ID of the button to which to attach the click event. – Faustinafaustine