通過選擇錶行的單元格

片段之一刪除錶行：通過選擇錶行的單元格

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>") 
 
    }); 
 
    $('th').on('click', '#no', function() { 
 
    $(this).remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Delete</th> 
 
    <th> Element</th> 
 
    </tr> 
 
    <tr> 
 
    <td id='no'>X</td> 
 
    <td>Example</td> 
 
    </tr> 
 
</table> 
 
<br> 
 
<button> 
 
More 
 
</button>

我想，當我點擊該行的X要刪除的行。我應該添加哪些代碼來執行此操作？

來源

2017-08-30 Lucian cahil

[刪除表的可能的複製行後單擊表格行刪除按鈕]（https://stackoverflow.com/questions/11553768/remove-table-row-after-clicking-table-row-delete-button） – Sand

$(document).ready(function(){ 
 
    $('button').click(function(){ 
 
     $('table').append("<tr><td onclick='removeRow(this)' id='no'>X</td><td>Example</td></tr>"); 
 
    }); 
 
}); 
 
function removeRow($this){ 
 
     $($this).parent().remove(); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <th>Delete</th> 
 
    <th> Element</th> 
 
</tr> 
 
<tr> 
 
    <td onclick='removeRow(this);' id='no'> 
 
     X 
 
    </td> 
 
    <td>Example</td> 
 
</tr> 
 
</table> 
 
<br> 
 
<button> 
 
More 
 
</button>

來源

2017-08-30 05:15:48

您應該按照事件委派動態創建的HTML元素。檢查我已更改的粗體代碼。

$(document).ready(function(){ 
    $('button').click(function(){ 
     $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>") 
    }); 
    **$(document)**.on('click', ''th' #no', function(){ 
     **$(this).parent('th:first').remove();** 
    }); 
});

來源

2017-08-30 05:16:53

在這裏，你有一個解決方案去https://jsfiddle.net/wfLu3Lzu/

$(document).ready(function(){ 
 
    $('button').click(function(){ 
 
     $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>") 
 
    }); 
 
    $('table').on('click', 'tr #no', function(){ 
 
     $(this).closest('tr').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <th>Delete</th> 
 
    <th> Element</th> 
 
</tr> 
 
<tr> 
 
    <td id='no'> 
 
     X 
 
    </td> 
 
    <td>Example</td> 
 
</tr> 
 
</table> 
 
<br> 
 
<button> 
 
More 
 
</button>

事件代表團應該從table至tr #no

希望這會幫助你。

來源

2017-08-30 05:17:19 Shiladitya

您X按鈕在td標記中，並且您試圖將事件綁定到th標記上。

能不能請你代替

$('th').on('click', '#no', function(){

這

$(document).ready(function(){ 
    $('button').click(function(){ 
     $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>") 
    }); 
    $('table').on('click', '#no', function(){ 
     $(this).parent().remove(); 
    }); 
});

來源

2017-08-30 05:19:00

您應該使用事件代表團：

$(document).on('click', '#no', function(){

這裏是你的工作演示：

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    $('table').append("<tr><td id='no'>X</td><td>Example</td></tr>") 
 
    }); 
 
    $(document).on('click', '#no', function() { 
 
    $(this).parent().remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Delete</th> 
 
    <th> Element</th> 
 
    </tr> 
 
    <tr> 
 
    <td id='no'> 
 
     X 
 
    </td> 
 
    <td>Example</td> 
 
    </tr> 
 
</table> 
 
<br> 
 
<button> 
 
More 
 
</button>

來源

2017-08-30 05:20:11

試試這個：

$('tr').on('click', '#no', function(){ 
     $(this).closest('tr').remove(); 
    });

來源

2017-08-30 05:20:34 Rakib

此功能將定位cliacked的TD和刪除TR它的歸屬。

$("td").click(function(){ 
    $(this).closest("tr").remove(); 
});

希望它解決了你的問題。

來源

2017-08-30 05:20:40 jhek

您不斷追加具有相同ID的元素，這些元素在綁定事件處理程序後動態插入。

您可以輕鬆創建的元素，事件處理程序，在當時它的插入，並使用類樣式而不是重複的ID

$(document).ready(function() { 
 
    $('#no').on('click', function() { 
 
    $(this).closest('tr').remove(); 
 
    }); 
 
    
 
    $('button').click(function() { 
 
    var tr = $('<tr />'), 
 
     td1 = $('<td />', { 
 
      'class' : 'no', 
 
      text : 'X', 
 
      on : { 
 
      click : function() { 
 
       tr.remove(); 
 
      } 
 
      } 
 
     }), 
 
     td2 = $('<td />', { 
 
      text : 'Example' 
 
     }); 
 
    
 
    $('table').append(tr.append(td1, td2)) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Delete</th> 
 
    <th> Element</th> 
 
    </tr> 
 
    <tr> 
 
    <td id='no'> 
 
     X 
 
    </td> 
 
    <td>Example</td> 
 
    </tr> 
 
</table> 
 
<br> 
 
<button> 
 
More 
 
</button>

來源

2017-08-30 05:26:58 adeneo

通過選擇錶行的單元格

回答

相關問題