上單擊刪除完整<tr>

Question

$(document).ready(function() { 
 
    $('.delete').on('click', function() { 
 
    confirm('Dialogue'); 
 
    if (confirm = true) { 
 
     $(this).closest('tr').remove() 
 
     alert('removed'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr role="row" class="odd"> 
 
     <td class="sorting_1">1</td> 
 
     <td>HTML</td> 
 
     <td>2016-07-07 10:57:53</td> 
 
     <td> 
 
     <ul class="list-inline actionlist"> 
 
      <li> 
 
      <a href="http://localhost/uiprac/user/edit_languages/1" type="button"> 
 
       <button class="btn btn-success">Edit</button> 
 
      </a> 
 
      </li> 
 
      <li> 
 
      <button class="btn btn-danger delete" type="button">Delete</button> 
 
      </li> 
 
     </ul> 
 
     </td> 
 

 
    </tr> 
 
    <tr role="row" class="even"> 
 
     <td class="sorting_1">2</td> 
 
     <td>CSS</td> 
 
     <td>2016-07-07 10:58:01</td> 
 
     <td> 
 
     <ul class="list-inline actionlist"> 
 
      <li> 
 
      <a href="http://localhost/uiprac/user/edit_languages/2" type="button"> 
 
       <button class="btn btn-success">Edit</button> 
 
      </a> 
 
      </li> 
 
      <li> 
 
      <button class="btn btn-danger delete" type="button">Delete</button> 
 
      </li> 
 
     </ul> 
 
     </td> 
 

 
    </tr> 
 
    <tr role="row" class="odd"> 
 
     <td class="sorting_1">3</td> 
 
     <td>BOOTSTRAP</td> 
 
     <td>2016-07-07 10:58:09</td> 
 
     <td> 
 
     <ul class="list-inline actionlist"> 
 
      <li> 
 
      <a href="http://localhost/uiprac/user/edit_languages/3" type="button"> 
 
       <button class="btn btn-success">Edit</button> 
 
      </a> 
 
      </li> 
 
      <li> 
 
      <button class="btn btn-danger delete" type="button">Delete</button> 
 
      </li> 
 
     </ul> 
 
     </td> 
 

 
    </tr> 
 
    <tr role="row" class="even"> 
 
     <td class="sorting_1">4</td> 
 
     <td>JQUERY</td> 
 
     <td>2016-07-07 10:58:17</td> 
 
     <td> 
 
     <ul class="list-inline actionlist"> 
 
      <li> 
 
      <a href="http://localhost/uiprac/user/edit_languages/4" type="button"> 
 
       <button class="btn btn-success">Edit</button> 
 
      </a> 
 
      </li> 
 
      <li> 
 
      <button class="btn btn-danger delete" type="button">Delete</button> 
 
      </li> 
 
     </ul> 
 
     </td> 
 

 
    </tr> 
 
    </tbody> 
 

 
</table>

每當我點擊刪除按鈕即可刪除完整的行到這沒問題。

刪除後，如果我點擊下一步刪除按鈕刪除下一行沒有任何行動顯示。

Answer 1

如果您檢查控制檯你點擊刪除按鈕的第一次後，你會看到這個問題：

Uncaught TypeError: confirm is not a function

這是因爲你需要從confirm()方法使用返回布爾值，而不是該方法本身，在您的if條件下。試試這個：

$('.delete').on('click', function() { 
    var result = confirm('Dialogue'); 
    if (result) { 
     $(this).closest('tr').remove() 
     alert('removed'); 
    } 
}); 

Working example

Answer 2

更改你的腳本

$(document).ready(function() { 
     $('.delete').on('click', function() { 
      if (window.confirm('Dialogue')) { 
       $(this).parents('tr').remove(); 
       alert('removed'); 
      } 
     }); 
    });