Javascript 数组值为'；在删除HTML表行时未删除

我有一个HTML模板，允许用户向表中添加行。但是，当我从表中删除特定行，并单击

欢迎访问我们的网站

按钮时，它仍然会在数组变量中显示已删除的记录。如何使它同时删除与delete操作相对应的数组条目，从而使数组与表中显示的内容相对应

如图所示，我添加了两条记录，分别为“Subject，Contain，1”和“Subject，Contain，2”：

但每当我删除第一条记录时，即“Subject，Contain，1”，数组仍会显示该记录：

//添加表格框
$（文档）.ready（函数（）{
$（“.button”）。在（“单击”，函数（）{
para=document.getElementById（“参数”）.value；
condi=document.getElementById（“条件”）.value；
value2match=document.getElementById（“valuetomatch”）.value；
if（参数和条件和值匹配！==null）{
var table=document.getElementById（“myTable”）；
var行=table.insertRow（-1）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var cell4=行插入单元格（3）；
cell1.innerHTML=document.getElementById（“参数”）.value；
cell2.innerHTML=document.getElementById（“条件”）.value；
cell3.innerHTML=document.getElementById（“valuetomatch”）.value；
cell4.innerHTML=
' ';
var myTab=document.getElementById（“myTable”）；
var tableData=[]；
//在页眉后循环表格的每一行。
对于（i=1；i
.button提交{
背景色：#4caf50；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
}
德鲁·伊姆先生{
背景色：透明；
背景重复：无重复；
边界：无；
光标：指针；
溢出：隐藏；
大纲：无；
}
桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
运输署，
th{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
身体{
字体系列：“流沙”，无衬线；
}
.按钮{
边界半径：50px；
背景色：#ff9633；
边界：无；
颜色：#ffffff；
文本对齐：居中；
字体大小：15px；
填充：10px；
宽度：80px；
过渡：均为0.5s；
光标：指针；
保证金：5px；
左边距：500px；
}
.按钮跨度{
光标：指针；
显示：内联块；
位置：相对位置；
过渡：0.5s；
}
.按钮跨度：之后{
内容：“\00bb”；
位置：绝对位置；
不透明度：0；
排名：0；
右：-20px；
过渡：0.5s；
}
.按钮：悬停范围{
右边填充：25px；
}
.按钮：悬停范围：之后{
不透明度：1；
右：0；
}
/*模态（背景）*/
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
填充顶部：100px；
/*盒子的位置*/
左：0；
排名：0；
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.4）；
/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
边框：1px实心#888；
宽度：45%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s；
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{
顶部：-300px；
不透明度：0；
}
到{
排名：0；
不透明度：1；
}
}
@关键帧动画顶点{
从{
顶部：-300px；
不透明度：0；
}
到{
排名：0；
不透明度：1；
}
}
/*关闭按钮*/
.结束{
颜色：白色；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
.模态标题{
填充：2x16px；
背景色：#ff9633；
颜色：白色；
}
.模态体{
填充：2x16px；
}
.模态页脚{
填充：2x16px；
背景色：#ff9633；
颜色：白色；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#ff9633；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：#fa7d34；
}



function delSpec(node) {
  // Always declare your variables! Use `let` or `const` or `var`:
  let r = node.parentNode.parentNode;
  // Remove the row from the array:
  tableData.splice(r.rowIndex - 1, 1);
  // Remove the row from the HTML table:
  r.parentNode.removeChild(r);
}

//declare the array as a global
var tableData = [];
$(document).ready(function () {
  $(".button").on("click", function () {
    para = document.getElementById("Parameter").value;
    condi = document.getElementById("Condition").value;
    value2match = document.getElementById("valuetomatch").value;

    if (para && condi && value2match !== null) {
      var table = document.getElementById("myTable");
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);

      cell1.innerHTML = document.getElementById("Parameter").value;
      cell2.innerHTML = document.getElementById("Condition").value;
      cell3.innerHTML = document.getElementById("valuetomatch").value;
      cell4.innerHTML =
        '<button  class = "del_img "onClick="delSpec(this)"><img src="deleteimg.png" width="30" height="30"></button> </div>';

      var myTab = document.getElementById("myTable");

      // Only add the new row:
      tableData.push([
        document.getElementById("Parameter").value,
        document.getElementById("Condition").value,
        document.getElementById("valuetomatch").value
      ]);

      modal.style.display = "none";
    } else {
      alert("All the input box cannot be empty!");
    }
  });
  // Move click handler outside of the other handler
  $("#buttonSubmit").onclick = function () {
    alert(tableData);
  };
});

function delSpec(node) {
  let r = node.parentNode.parentNode;
  tableData.splice(r.rowIndex - 1, 1);
  r.parentNode.removeChild(r);
}