Javascript JQuery`length`属性工作不正常。为什么？

在以下SSCCE中，在

单击
监听器按钮#删除
，出现
警报（“numberOfRows:+numberOfRows”）//检查******************
语句。计算
numberOfRows
之前的语句。此数字始终显示为
0
。问题在于它

请运行此代码。单击一次或多次添加文本字段按钮。每次单击将添加橙色边框的表格。然后单击
删除文本字段
按钮，您将获得
警报
。问题是，无论实际有多少行，
numberOfRows
总是显示为
0

问题是为什么？如何解决此问题？


$（文档）.on（“单击”，“按钮.删除”，函数（））{
event.preventDefault（）；
var currentRow=$（this）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）；
currentRow.remove（）；
//更新numberOfRows变量
var parentTable=$（this）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）；
var numberOfRows=parentTable.children（'tbody'）.children（'tr'）.length；
/*****************************************/
/*****************************************/
/*****************************************/
警报（“numberOfRows:+numberOfRows）；//检查*****************
/*****************************************/
/*****************************************/
/*****************************************/
如果（！（numberOfRows>1））{
$（“.remove”）.hide（）；
}
});
$（文档）。在（“单击”，“按钮.添加”，函数（）上）{
event.preventDefault（）；
var parentTable=$（this）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）；
var lastTableRow=parentTable.children（'tbody'）.children（'tr:last'）；
//添加新行
parentTable.children（'tbody'）.append（lastTableRow.clone（））；
//重置lastRow变量
lastTableRow=parentTable.children（'tbody'）.children（'tr:last'）；
//重置字段
find（'table tbody tr td input'）。每个（函数（）{
$（this.val（“”）；
});
//更新numberOfRows变量
var numberOfRows=parentTable.children（'tbody'）.children（'tr'）.length；
警报（“numberOfRows:+numberOfRows）；//检查
如果（！（numberOfRows>1））{
$（“.remove”）.hide（）；
}否则{
$（“.remove”）.show（）；
}
});
#外部表格{
填充：20px；
边框：3倍纯红；
}
#内桌{
边框：3倍纯色橙色；
}
.移除{
显示：无；
}

输入第一个投诉：
添加文本字段
删除文本字段
表尾
像这样的东西应该是这样的


$（'.outer table'）。在（“单击”、“.add”函数上（事件）{
event.preventDefault（）；
var row=$（this）.closest（'.internal table'）.closest（'tr'），
行=行。最近（'tbody'）。子行（'tr'）。长度+1；
row.after（row.clone（））；
警报（“numberOfRows:+行）；
$（“.remove”）.toggle（行>1）；
});
$（'.outer table'）。在（“单击”，“删除”，函数（事件）{
event.preventDefault（）；
var row=$（this）.closest（'.internal table'）.closest（'tr'），
行=行。最近（'tbody'）。子行（'tr'）。长度-1；
row.remove（）；
警报（“numberOfRows:+行）；
如果（行数<2）$（“.remove”）.hide（）；
});
.outer表{
填充：20px；
边框：3倍纯红；
}
.内桌{
边框：3倍纯色橙色；
}
.移除{
显示：无；
}

输入第一个投诉：
添加文本字段
删除文本字段
表尾
首先，使用
最近的（“表”）
获取父表。

和
.closest（“tr”）
，用于该行

如果必须确实有嵌套的表，那么您仍然可以使用
.closest（“表”）.parents（“表”）但这应该是一个严重的危险信号

最后，它不起作用的原因是您正在使用以下命令从DOM中删除remove click处理程序（按钮）的上下文：

currentRow.remove();

然后立即尝试使用以下命令向上导航DOM树：

var parentTable = $(this).parent()[... snip ... ].parent();

但是，
$（this）.parent（）…
不再存在，因为您已将其删除

在这个场景中，
.length
应该是0，因为DOM导航不返回任何内容

如果先获取父表，然后删除该行，则应该可以使用。
无论这里的实际问题是什么，都必须有比
$（this.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）.parent（）
更好的方法来遍历指定的元素PARTRONE（）.PARTER（）.PAR... /代码>等等。你做了一些错误的改变顺序：在删除当前行之前定义父表。ID也是唯一的，并且只能使用一次，甚至在插入的元素上。类似的，父母（“表”）。父母（TR）；