當點擊一行中的元素時刪除一行

我有一個項目列表，我將以表格行的形式呈現給用戶。當點擊一行中的元素時刪除一行

每一行都將在右上角，點擊它會導致以下行爲時，一個小「X」的圖像：

提示用戶（是/否），如果他們想要刪除行
如果用戶單擊取消，則不發生任何事情，如果是，則刪除該行並更新表。

的HTML看起來是這樣的：

<html> 
    <head> 
     <script type="text/javascript" src = jquery.js"></script> 
    </head> 
    <body> 
     <table><tbody> 
      <tr> 
      <td><div class="delbtn"></div> 
       <div class="rowitem">This one line item</div> 
      </tr> 
      <tr> 
      <td><div class="delbtn"></div> 
       <div class="rowitem">This another line item</div> 
      </tr> 
      <tr> 
      <td><div class="delbtn"></div> 
       <div class="rowitem">blah, blah, blah</div> 
      </tr> 
      </tbody> 
     </table> 
     <script type="text/javascript"> 
      $().ready(function(){ 
       // What to do ? 
      }); 
     </script> 
    </body> 
</html>

很顯然，我綁定到div.delbtn模式，但我怎麼知道被點擊的行，我怎麼刪除表中的那一行？

來源

2011-11-16 Homunculus Reticulli

$().ready(function() { 
    $('.delbtn').click(function() { 
     $(this).parent('tr').remove(); 
    }); 
});

無需「知道」被點擊哪一行的，因爲每個DOM節點意識到誰是它的父節點，並且可以使用eaisly .parent（移回DOM樹），尋找一個特定的祖先。在這種情況下，你想用核武器炸一排，因此尋找其有史以來節點點擊中發生的祖先<tr>

來源

2011-11-16 19:02:11

嘗試 -

$(document).ready(function() { 
    $(".delbtn").click(function() { 
     $(this).closest('tr').remove(); 
    }) 
});

演示 - http://jsfiddle.net/39pxL/

來源

2011-11-16 19:04:27 ipr101

ipr101：感謝您的努力併爲此提供演示 - +1。我發現很難選擇正確的答案，因爲我對jQuery不瞭解parent（）和closet（）之間的區別（優缺點） - 任何幫助人員？ –

如果你有很多行或者打算在頁面加載後添加/刪除行，你應該使用委託。不是將偵聽器綁定到每行，而只是將一個偵聽器綁定到表。設置該表上的標籤（例如myTable的）一個ID，並做：

$(document).ready(function() { 
    $('#myTable').delegate('tr .delbtn', 'click', function() { 
     $(this).parent('td').parent('tr').remove(); 
    }); 
});

另外，不要忘記關閉這些TD標籤。

來源

2011-11-16 19:21:47

當點擊一行中的元素時刪除一行

回答

相關問題