Использование JQuery для удаления HTML элементов из выпадающего списка

Question

<script> 

    $(document).ready(function() { 
     $('.notification .tools .remove').on('click', function() { 
      alert('hola'); 
      $(this).parentsUntil('.notification').remove(); 
     }); 
    }); 


</script> 

<div id="notification-list" class="notification-chain" style="display:none"> 

    @foreach ($notifications as $notification) 

    <div class="notification" style="width:300px"> 

     <div class="tools"> 
      <a href="javascript:;" class="remove"></a> 
     </div> 

     <div class="notification-messages"> 

      <div class="message-wrapper"> 

       <div class="heading">{{ $notification->name }}</div> 
       <div class="description">{{ 'User ' .$notification->points_to. ' ' .$notification->content }}</div> 
       <div class="date pull-left">{{ $notification->created_at }}</div> 

      </div> 

      <div class="clearfix"></div> 

     </div> 

    </div> 

    @endforeach 

</div> 

читателей Здравствуйте,

Выше в настоящее время, что я работаю с. Он отображает раскрывающийся список для хранения всех уведомлений, полученных пользователем, и в настоящее время у меня есть x в верхнем углу каждого раздела «уведомление».

Однако ни один из вышеперечисленных jQuery, похоже, не работает. Предупреждение не будет отображаться, и я ничего не получаю в консоли.

Пожалуйста, не стесняйтесь насмехаться и рассказывать мне, какая глупость я делаю неправильно.

Большое спасибо.

---

Я ценю всех помощников.

Вот некоторые laravel.io файлы с некоторым более широким контекстом:

Полный HTML: http://laravel.io/bin/Nk4xP

JS для выпадающего списка: http://laravel.io/bin/9vn1O#

Answer 1

В уведомлении класс для div, должна быть точка перед классом в качестве селектора, например:

$(this).parentsUntil('.notification').remove(); 

Надеюсь, что это сработает.

Answer 2

Вот некоторые отладочные советы:

Подумайте обо всех вещах, которые могли бы идти неправильно, а затем начать их решение. Например:

1. Возможно, jQuery не загружен вообще.

2. Возможно, селектор для обработчика событий неверен, и jQuery не может найти элемент для присоединения обработчика события.

3. Возможно, код в вашей функции $(document).ready() не выполняется, и обработчик событий никогда не был настроен.

Используя комбинацию изменений кода и консоли браузера, вы можете исключить эти три вещи:

ли загружена Jquery? Откройте консоль & тип $ - если он говорит undefined, то это ваша проблема.

Неправильный ли переключатель для элемента? Откройте консоль и введите $('.notification .tools .remove'). Если вы получите пустой массив, то это ваша проблема. В качестве дополнительного бонуса Chrome (и, возможно, другие браузеры) выделит выбранный элемент, если вы нажмете на него - это полезно, если вы выбираете другой элемент, чем вы ожидали.

Выполняется ли код $(document).ready()?Прикрепите другой alert, расположенный там, в верхней части функции &, если он заряжается при перезагрузке страницы.

Важно решить такие вопросы, как эти, за один раз - что произойдет, если вы измените сразу две или несколько вещей, и проблема исчезнет (или возникает новая проблема)? Вы не будете знать, какой из них решил или вызвал проблему!

Answer 3

Я смог заставить его работать на скрипке ниже. Я удалил дисплей: none (так что я могу видеть div) и символы не html. Попробуйте взглянуть на консоль браузера (F12 в Linux и Windows-компьютерах) и посмотреть, есть ли ошибки. Ошибки Javascript будут препятствовать дальнейшему запуску кода.

Также я положил текст в виде HREF тега

<a href="javascript:void()" class="remove">remove</a> 

https://jsfiddle.net/m9rktusb/

Answer 4

Лука Пожалуйста, вы можете показать нам окончательный HTML? код работает отлично, поэтому проблема должна быть в другом месте. https://jsfiddle.net/z7958hx7/1/

$(document).ready(function() { 
    $('.notification .tools .remove').on('click', function() { 
     alert('hola'); 
     $(this).parentsUntil('.notification').remove(); 
    }); 
});