Как удалить div с помощью jquery?

#jquery

Вопрос:

У меня есть этот код:

    <div class="container">
    <div class="row">
      <div class="col">
        <a href="1" class="delete_activity">x</a> 
      </div>
    </div>  
    <div class="row">
      <div class="col">
        <a href="2" class="delete_activity">x</a> 
      </div>
    </div>  
    <div class="row">
      <div class="col">
        <a href="3" class="delete_activity">x</a> 
      </div>
    </div>  
  </div>

После нажатия на «delete_activity» мне нужно удалить div «row», в котором есть эта ссылка.
В случае, если пользователь нажмет на X (href = 1), мне нужно удалить:

     <div class="row">
      <div class="col">
        <a href="1" class="delete_activity">x</a> 
      </div>
    </div>

Как я могу это сделать с помощью jQuery?

1. Вы действительно пробовали? Если да, можем ли мы посмотреть, что вы создали?

2. я думаю, вам также нужно удалить из базы данных или только из HTML. bcoz при обновлении страницы. вы увидите это снова, если сделаете это только с jQuery

Ответ №1:

Лучший способ сделать это — использовать closest() .

 $('.delete_activity').click(function(){
    $(this).closest('.row').remove();
});

Не используйте parents (если это не то поведение, которое вы хотите).

closest будет удален только первый элемент, найденный в дереве DOM.

parents удалит ВСЕ элементы, соответствующие дереву DOM.

Ответ №2:

 $('.delete_activity').click(function(){
    $(this).parents('.row').remove();
});

Документация: http://api.jquery.com/remove /

Ответ №3:

 $(".delete_activity").click(function(event) {
    event.preventDefault()
    $(this).parents('.row').remove();
});

Ответ №4:

Попробуйте следующее

 $('.delete_activity').click(function (e) { 
  $(this).parents('div.row').remove();
  e.preventDefault();
});

Ответ №5:

 $('.delete_activity').click(function(){
    $(this).parents('row:first').remove();
});

Используйте first, чтобы получить первого родителя выше!