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

我能夠使它在下面的小提琴中工作。 我刪除了顯示：無（所以我可以看到div）和非HTML字符。嘗試查看瀏覽器控制檯（Linux和Windows計算機中的F12）並查看是否有錯誤。 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(); 
    }); 
});