Скрыть div после нажатия кнопки в этом div

Question

Я хотел бы удалить или скрыть div, когда я нажму кнопку. Проблема в том, что у меня много 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> 

       <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> 

Мой 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 знаю, как это сделать, как я могу скрыть DIV, где я нажал кнопку?

Answer 1

Вы довольно близко. Две проблемы:

1. Вы прикрепление обработчик события к submit() форм, классифицируемых в качестве actionlist, но ваши формы на самом деле классифицируются как akcje_konkretne.
2. Ваш closest() селектор (".col-sm-4 col--remove") содержит пробел, но не второй .. Как написано, это ищет элемент «col-remove» в ближайшем элементе, классифицированном как «col-sm-4». Вместо этого вы пытались найти ближайший элемент, который классифицируется как как «col-sm-4», так и «col-remove»: closest('.col-sm-4.col--remove').

Но есть еще лучший способ ...

Если вы хотите внешний DIV, попробуйте:

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

Я guesing .col--remove класс используется для обозначения «это div, который вы хотите удалить».

Вы можете view this approach in action (обратите внимание, что внешний div имеет красную рамку, внутренний div имеет синюю рамку).

Если вы хотите ближайший DIV (один сразу оборачивать form получать представленный), попробуйте:

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

Вы можете view this approach in action.

Answer 2

Просто маленькая ошибка:

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

управления имеет как класс, так что вам нужно приковать его в селекторе.