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

各位读者，

以上是我目前正在使用的。它显示一个下拉列表来保存用户收到的所有通知，我目前在每个“通知”div 的顶角都有一个 x。

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

请随意嘲笑我并告诉我我做错了什么愚蠢的事情。

非常感谢。

---

感谢所有的帮助。

以下是一些具有更广泛上下文的 laravel.io 文件：

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

下拉列表的js： http://laravel.io/bin/9vn1O#

Answer 1

这里有一些调试技巧：

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

1. 可能根本没有加载 jQuery。

2. 可能事件处理程序的选择器不正确，jQuery 找不到将事件处理程序附加到的元素。

3. 可能您的$(document).ready() 函数中的代码没有执行，并且从未设置事件处理程序。

结合更改代码和浏览器控制台，您可以排除以下三件事：

jQuery 加载了吗？打开控制台并输入$ - 如果它显示undefined，那就是你的问题。

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

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

一次解决此类问题很重要 - 如果您同时更改两个或更多内容，并且问题消失（或出现新问题），会发生什么情况？您将不知道是哪一个解决了问题或导致了问题！

Answer 2

我能够让它在下面的小提琴中工作。 我删除了 display:none （所以我可以看到 div）和非 html 字符。尝试查看浏览器控制台（Linux 和 Windows 计算机中的 F12）并查看是否有错误。 Javascript 错误将阻止进一步的代码运行。

我还在 a href 标记中放了一段文字

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

https://jsfiddle.net/m9rktusb/

Answer 3

由于通知是div的一个类，所以类前面应该有一个点作为选择器，如下所示：

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

希望这行得通。

Answer 4

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

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