使用jQuery从下拉菜单中删除html元素 - Using jQuery to remove html elements from a dropdown

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

你好读者,

以上是我目前正在处理的。它显示了一个下拉菜单来保存用户收到的所有通知，我目前在每个"通知"div的顶部角落都有一个x。

然而，上面的jQuery似乎都没有运行。警告不会显示，我在控制台中什么也得不到。

请随意嘲笑我，告诉我我做错了什么蠢事。

许多谢谢。

我感谢所有的人的帮助。

这里有一些旅行心得。具有更宽上下文的IO文件:

完整的html:http://laravel.io/bin/Nk4xP

js用于下拉菜单:http://laravel.io/bin/9vn1O

下面是一些调试技巧:

想想所有可能出错的事情，然后开始排除它们。例如:

可能jQuery没有加载。
可能事件处理程序的选择器是不正确的，jQuery找不到一个元素来附加事件处理程序
可能您的$(document).ready()函数中的代码没有执行，并且事件处理程序从未设置。

结合修改代码和浏览器控制台，可以排除以下三种情况:

是否加载了jQuery ?打开控制台&输入$ -如果它显示undefined，那么这就是你的问题。

元素的选择器是否不正确?打开控制台并输入$('.notification .tools .remove')。如果你得到一个空数组，那就是你的问题了。作为一个额外的好处，Chrome(可能还有其他浏览器)将突出显示选中的元素，如果你选择的元素与你预期的不同，这是很有用的。

$(document).ready()代码正在执行吗?在函数&的顶部粘贴一个不同的alert当你重新加载页面时，看看它是否会触发。

一次解决一个这样的问题是很重要的——如果你一次改变两个或更多的东西，问题就会消失(或者出现新的问题)，会发生什么?你不知道是哪个解决了问题还是引起了问题!

我能够使它在下面的小提琴中工作。我删除了display:none(这样我就可以看到div)和非html字符。尝试查看浏览器控制台(linux和windows计算机中的F12)，看看是否有错误。Javascript错误将阻止进一步的代码运行。

我还在a href标签内放了一个文本

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

https://jsfiddle.net/m9rktusb/

通知是div的一个类，在类的前面应该有一个点作为选择器，像这样:

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

Luke你能给我们看看最终的HTML吗?代码运行良好，所以问题应该在其他地方。https://jsfiddle.net/z7958hx7/1/

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