在成功的ajax请求时删除HTML表行

Question

下面的代码我用来创建一个关于搜索结果的动态表。它基本上是一个jquery代码，它从后端获取搜索结果并创建一个表

$('#search-movie').on('submit',function (e) {
$.ajax({
type: 'POST',
url: '/search',
data: $('#search-movie').serialize(),
success: function (q) {

var trHTML='';
$.each(q, function (i, userData) {
for(j=0; j<userData.length; j++)
{

trHTML +=
'<tr><td style="padding-right: 10px">'
+ userData[j].showid
+ '</td><td style="padding-right: 10px">'
+ userData[j].typeof
+ '</td><td style="padding-right: 10px">'
+ userData[j].title
+ '</td><td style="padding-right: 10px">'
+ userData[j].directors
+ '</td><td style="padding-right: 10px">'
+ userData[j].cast
+ '</td><td style="padding-right: 10px">'
+ userData[j].country
+ '</td><td style="padding-right: 10px">'
+ userData[j].releaseyear
+ '</td><td style="padding-right: 10px">'
+ userData[j].rating
+ '</td><td style="padding-right: 10px">'
+ userData[j].duration
+ '</td><td style="padding-right: 10px">'
+ userData[j].listedin
+ '</td><td style="padding-right: 10px">'
+ userData[j].description
// + '</td></tr style="padding-right: 10px">'
+ '</td><td style="padding-right: 10px">'
+ '<button type="button" id="button2" class="btnSelect" onClick="clickme()">delete</button>'
+ '</td></tr>'
}
});
$('#table1').append(trHTML);

}
});
e.preventDefault();
});

})
</script>

我正在从后端api中删除一个关于成功ajax响应的表行。我已经尝试过了，但它没有删除成功ajax响应前端的表行。

$(document).ready(function() {
$("#table1").on('click', '.btnSelect', function() {
var currentRow = $(this).closest("tr");
var col1 = currentRow.find("td:eq(0)").text();
var showid = col1
$.ajax({
url: '/delete_movie',
type: 'POST',
data: showid,
success: function(response) {
alert(response[1]);
$(this).closest("tr").remove();
}
})
});
});

Answer 1

.closest()在DOM中向上级联，包括其自身，因此找不到<tr>。您可以使用.find()https://api.jquery.com/find/

您是否可以针对特定的行类或id，而不是使用this？

$("#table1 tr.the-row-class").remove();

或

$("#theRowId").remove();

Answer 2

<script>
$(document).ready(function(){

$("#table1").on('click','.btnSelect',function(){

var currentRow=$(this).closest("tr"); 

var col1=currentRow.find("td:eq(0)").text(); 

var showid=col1

$.ajax({ 
url: '/delete_movie', 
type: 'POST', 
data: showid,
success: function(response){ 
alert(response[1]);
console.log(this);
currentRow.remove(); //changing this line fixes the issue
} 
})
});
});
</script>