Javascript 在jQuery中删除父行而不是子行

这是特定屏幕大小上数据表的结果。如果显示所有列，则使用

$(this).closest('tr').remove();

---

但当屏幕尺寸变小时，就会出现这种情况。我不能再使用上面的代码了。现在，如果我点击类deleteRow的按钮，我想删除类parent的tr及其子行（尽管子行不在父行内），而不仅仅是最近的行。可能有许多行具有classparent，因此我只想删除与childs行关联的行

试试看

$(this).closest('tr.child')

试一试

我想删除父类的tr，而不仅仅是最近的一行

然后在选择器中包括额外的信息

.parent

，如下所示：

$(this).closest('tr.parent').remove();

我想删除父类的tr，而不仅仅是最近的一行

然后在选择器中包括额外的信息

.parent

，如下所示：

$(this).closest('tr.parent').remove();

---

你可以看看我在这里放在一起的样本，我试着把它们分成许多案例，你可以参考它们并重新应用到你的项目中

让我知道哪个适合你，我可以解释得更清楚

$（文档）.ready（函数（）{
$（'.delete single parent'）。每个（函数（索引）{
var$this=$（this）；
$this。单击（函数（）{
//$（this）=单击的元素按钮
//试试第1、3、5行
$（this）.closest（'tr.parent'）.remove（）；
//尝试第2、4、6行。假设“parent”始终是当前“child”的兄弟姐妹`
$（this）.closest（'tr.child'）.prev（）.remove（）；
})
});
//这将查询到顶部（表），并查找要删除的所有父行
//将仅删除第1、3、5行
$（'.delete all parent'）。单击（function（）{
$（本）
.closest（'表'）
.find（'tr.parent'）
.remove（）；
})
})

表格{
边框：1px纯灰；
}
表tr：第n个子项（奇数）{
背景色：#F3；
}
表tr td{
填充：10px；
}

1.
删除直接父项
删除第1、3、5行
2.
删除父项（第1行）
删除第1、3、5行
3.
删除直接父项
删除第1、3、5行
4.
删除父项（第3行）
删除第1、3、5行
5.
删除直接父项
删除第1、3、5行
6.
删除父项（第5行）
删除第1、3、5行

您可以看看我在这里收集的示例，我尝试将它们分成许多案例，您可以参考这些案例并重新应用到您的项目中

让我知道哪个适合你，我可以解释得更清楚

$（文档）.ready（函数（）{
$（'.delete single parent'）。每个（函数（索引）{
var$this=$（this）；
$this。单击（函数（）{
//$（this）=单击的元素按钮
//试试第1、3、5行
$（this）.closest（'tr.parent'）.remove（）；
//尝试第2、4、6行。假设“parent”始终是当前“child”的兄弟姐妹`
$（this）.closest（'tr.child'）.prev（）.remove（）；
})
});
//这将查询到顶部（表），并查找要删除的所有父行
//将仅删除第1、3、5行
$（'.delete all parent'）。单击（function（）{
$（本）
.closest（'表'）
.find（'tr.parent'）
.remove（）；
})
})

表格{
边框：1px纯灰；
}
表tr：第n个子项（奇数）{
背景色：#F3；
}
表tr td{
填充：10px；
}

1.
删除直接父项
删除第1、3、5行
2.
删除父项（第1行）
删除第1、3、5行
3.
删除直接父项
删除第1、3、5行
4.
删除父项（第3行）
删除第1、3、5行
5.
删除直接父项
删除第1、3、5行
6.
删除父项（第5行）
删除第1、3、5行

刚刚解决了我自己的问题。我在页面加载时向父行添加了属性

<tr data_id = {{ $item->id }}>

并添加了通过属性作为选择器删除父行的代码

$('[data_id="'+ row_id +'"]').remove();

因此，一旦ajax成功，我将称之为这两个

$tr.find('td').fadeOut(1000,function(){ 
    $(this).closest('tr.child').remove();
    $('[data_id="'+ row_id +'"]').remove(); 
});

---

刚刚解决了我自己的问题。我在页面加载时向父行添加了属性

<tr data_id = {{ $item->id }}>

并添加了通过属性作为选择器删除父行的代码

$('[data_id="'+ row_id +'"]').remove();

因此，一旦ajax成功，我将称之为这两个

$tr.find('td').fadeOut(1000,function(){ 
    $(this).closest('tr.child').remove();
    $('[data_id="'+ row_id +'"]').remove(); 
});

---

$（this）.closest（'.parent'）.remove（）您在此处未提供足够的信息。请添加您的标记并解释“行关联到儿童行”的含义。如果子级不在父级内部，那么关联它们的标准是什么？请参考我所说的，datatable
$（this）.closest（'.parent'）.remove（）您在此处未提供足够的信息。请添加您的标记并解释“行关联到儿童行”的含义。如果子级不在父级内部，那么关联它们的标准是什么？请参考我所说的DataTable。您能否解释一下为什么会这样做，以及该代码在做什么？这只能删除具有子级的行。我想删除离按钮最近的子行和它的父行。你能解释一下为什么这样做以及代码在做什么吗？这只能删除带有子类的行。我要删除离按钮最近的子行及其父行子行不在父行内。子行不在父行内。