Hide div after clicking button in that div

Question

I would like to delete or hide div when I click the button. The problem is that I have a lot of divs and I want to make delete the specific div where I clicked button.

My divs:

              <div class="col-sm-4 col--remove">
                    <div class="post post--preview">
                        <form class="akcje_konkretne" method="post">
                        <button type="submit" name="usun" value="usun" class="btn read-more post--btn usun">usuń</button>
                        </form>
                    </div>
              </div>

              <div class="col-sm-4 col--remove">
                    <div class="post post--preview">
                        <form class="akcje_konkretne" method="post">
                        <button type="submit" name="usun" value="usun" class="btn read-more post--btn usun">usuń</button>
                        </form>
                    </div>
              </div>

              <div class="col-sm-4 col--remove">
                    <div class="post post--preview">
                        <form class="akcje_konkretne" method="post">
                        <button type="submit" name="usun" value="usun" class="btn read-more post--btn usun">usuń</button>
                        </form>
                    </div>
              </div>

              <div class="col-sm-4 col--remove">
                    <div class="post post--preview">
                        <form class="akcje_konkretne" method="post">
                        <button type="submit" name="usun" value="usun" class="btn read-more post--btn usun">usuń</button>
                        </form>
                    </div>
              </div>

My jQuery:

$('form.actionlist').submit(function(e) {
        e.preventDefault();
        var $form = $(this);

     //Tried with:
$(this).hide();
$(this).closest('.col-sm-4 col--remove').hide();
$('.col-sm-4 col--remove').hide();

     });

Dont know how to do it, how I can hide div where I clicked button?

Answer 1

You're pretty close. Two problems:

1. You're attaching your submit() event handler to forms classed as actionlist, but your forms are actually classed as akcje_konkretne.
2. Your closest() selector (".col-sm-4 col--remove") contains a space, but not a second .. As written, this looks for the "col--remove" element within the closest element classed as "col-sm-4". Instead, you were trying to look for the closest element that is classed as both "col-sm-4" and "col--remove": closest('.col-sm-4.col--remove').

But there's an even better way...

If you want the outer div, try:

$('form.akcje_konkretne').submit(function(e) {
   e.preventDefault();
   $(this).closest('div.col--remove').hide(); //or remove(), if that's what you want
});

I'm guesing the .col--remove class is used to indicate "this is the div you want to remove".

You can view this approach in action (note the outer div has a red border, the inner div has a blue border).

If you want the closest div (the one immediately wrapping the form getting submitted), try:

$('form.akcje_konkretne').submit(function(e) {
   e.preventDefault();
   $(this).closest('div').hide(); //or remove(), if that's what you want
});

You can view this approach in action.

Answer 2

Just a little mistake :

$(this).closest('.col-sm-4.col--remove').hide();

the control has both class so you need to chain it in the selector.