답변:
네가 옳아:
$('#myTableRow').remove();행에 다음 id과 같은 이 있으면 제대로 작동합니다 .
<tr id="myTableRow"><td>blah</td></tr>이 없으면 idjQuery의 다양한 셀렉터를 사용할 수 있습니다 .
$('#myTable tr').click(function(){
$(this).remove();
return false;
});더 나은 것
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});테이블의 데이터 셀 안에 버튼 / 링크가 있다고 가정하면 이와 같은 방법으로 트릭을 수행 할 수 있습니다 ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});클릭 한 버튼 / 링크의 부모의 부모가 제거됩니다. 부모 ()는 일반적인 DOM 객체가 아닌 jQuery 객체이기 때문에 parent ()를 사용해야하며 버튼이 행 안에있는 데이터 셀 안에 있기 때문에 parent ()를 두 번 사용해야합니다. 당신이 제거하고 싶은 것. $ (this)는 버튼을 클릭 한 것이므로 다음과 같이하면 버튼 만 제거됩니다.
$(this).remove();데이터 셀이 제거되는 동안 :
$(this).parent().remove();행의 아무 곳이나 클릭하여 간단하게 제거하려면 다음과 같이하십시오. 이 메시지를 쉽게 수정하여 사용자에게 프롬프트하거나 두 번 클릭하여 작업 할 수 있습니다.
$(".delete").live('click', function(event) {
$(this).parent().remove();
});그것이 도움이 되길 바랍니다 ... 나는 이것에 조금 어려움을 겪었습니다.
당신이 사용할 수있는:
$($(this).closest("tr"))요소의 부모 테이블 행을 찾는 데 사용됩니다.
부모 (). 부모 ()보다 더 우아합니다.
-편집-누군가 행을 제거하는 것에 대한 질문이라고 지적했습니다.
$($(this).closest("tr")).remove()아래에서 지적했듯이 간단하게 수행 할 수 있습니다.
$(this).closest('tr').remove();여러 요소에서 발생하는 이벤트와 같은 많은 작업에 유사한 코드 스 니펫을 사용할 수 있습니다.
$(this).closest("tr").remove()
function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>아마도 이런 식으로도 효과가 있습니까? 나는 "this"로 무언가를 시도하지 않았으므로 그것이 작동하는지 아닌지를 모른다.
테이블에서 테이블 행 ( <tr>) 태그를 제거하기 만하면됩니다. 예를 들어 다음은 테이블에서 마지막 행을 제거하는 코드입니다.
$('#myTable tr:last').remove();
* 위의 코드는 이 jQuery Howto post 에서 가져 왔습니다 .
크기에 이것을 시도하십시오
$(this).parents('tr').first().remove();전체 목록 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.deleteRowButton').click(DeleteRow);
});
function DeleteRow()
{
$(this).parents('tr').first().remove();
}
</script>
</head>
<body>
<table>
<tr><td>foo</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bar bar</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bazmati</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
</table>
</body>
</html>또 다른 방법 empty():
$(this).closest('tr').empty();삭제하려는 행이 변경 될 수있는 경우이를 사용할 수 있습니다. 삭제하려는 행 #에이 함수를 전달하십시오.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}$('tr').click(function()
{
$(this).remove();
});나는 그것이 작동함에 따라 위의 코드를 시도 할 것이라고 생각하지만, 왜 그것이 왜 작동하는지 모르고 전체 테이블이 제거됩니다. 또한 행을 클릭하여 행을 제거하려고합니다. 정확한 답을 찾지 못했습니다.
이런 HTML이 있다면
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>어디에 userid="123"테이블을 만들 때 동적으로 채울 수있는 맞춤 속성이 있습니다.
당신은 같은 것을 사용할 수 있습니다
$(".spanUser").live("click", function () {
var span = $(this);
var userid = $(this).attr('userid');
var currentURL = window.location.protocol + '//' + window.location.host;
var url = currentURL + "/Account/DeleteUser/" + userid;
$.post(url, function (data) {
if (data) {
var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW
} else {
alert('Sorry, there is some error.');
}
});
});따라서이 경우 TR태그 의 클래스 나 ID를 모르지만 어쨌든 삭제할 수 있습니다.
나는 이것이 오래된 게시물이라는 것을 알고 있지만 똑같은 일을하고 있었고 받아 들인 대답이 나에게 도움이되지 않는다는 것을 알았습니다. 이것이 작성된 이후 JQuery가 계속 진행되었다고 가정하십시오.
어쨌든, 나는 다음이 나를 위해 일한 것을 발견했다.
$('#resultstbl tr[id=nameoftr]').remove();이것이 누군가에게 도움이되는지 확실하지 않습니다. 위의 예제는 더 큰 함수의 일부이므로 이벤트 리스너에 래핑하지 않았습니다.
부트 스트랩 테이블을 사용하는 경우
이 코드 스 니펫을 bootstrap_table.js에 추가하십시오
BootstrapTable.prototype.removeRow = function (params) {
if (!params.hasOwnProperty('index')) {
return;
}
var len = this.options.data.length;
if ((params.index > len) || (params.index < 0)){
return;
}
this.options.data.splice(params.index, 1);
if (len === this.options.data.length) {
return;
}
this.initSearch();
this.initPagination();
this.initBody(true);
};그런 다음 var allowedMethods = [
더하다 'removeRow'
마지막으로 당신은 사용할 수 있습니다 $("#your-table").bootstrapTable('removeRow',{index:1});
id는 좋은 선택자가 아닙니다. 행에 일부 속성을 정의 할 수 있습니다. 선택기로 사용할 수 있습니다.
<tr category="petshop" type="fish"><td>little fish</td></tr>
<tr category="petshop" type="dog"><td>little dog</td></tr>
<tr category="toys" type="lego"><td>lego starwars</td></tr>func를 사용하여 다음과 같은 행을 선택할 수 있습니다 (ES6).
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');테이블에서 행을 제거하는 가장 쉬운 방법 :
예를 들면 다음과 같습니다.
<table id='myTable' border='1'>
<tr id='tr1'><td>Row1</td></tr>
<tr id='tr2'><td>Row2</td></tr>
<tr id='tr3'><td>Row3</td></tr>
<tr id='tr4'><td>Row4</td></tr>
<tr id='tr5'><td>Row5</td></tr>
</table>
//======REMOVE TABLE ROW=========
//1. remove spesific row using its ID
$('#tr1').remove();
//2. remove spesific row using its order or index.
//row index started from 0-n. Row1 index is 0, Row2 index is 1 and so on.
$('#myTable').find('tr:eq(2)').remove();//removing Row3