Javascript 151未捕获类型错误：无法读取属性'；parentNode'；删除第二个费用要素时为空

未捕获类型错误无法读取null的属性父节点， 删除第二个费用要素时， 你能帮我解决这个问题吗， 我不明白为什么会这样， 尝试在互联网上看到各种解决方案， 但并不成功

我添加金额和原因，然后单击费用添加费用， 然后，当我尝试通过单击x按钮删除费用时，当我尝试删除第二个费用元素时，特定的费用元素被删除，我得到以下错误：151 Uncaught TypeError:删除第二个费用元素时，无法读取null的属性“parentNode”

总预算
0
收入
0


费用
0


收入明细




费用明细


变量r=0，a=0，z=0，x=0，l=0，m=0，n=0，g=0，h=0，i=0，add=0，sub=0，newadd=0，newsub=0，mkkt=0，mkt=0，tkt=0；
功能公司{
r=f1.reason.value；
a=f1.amount.value；
clr（）；
updatedi（）；
预算（）；
addinc（）；
}
函数exp（）{
r=f1.reason.value；
a=f1.amount.value；
clr（）；
updatede（）；
预算（）；
addexp（）；
}
函数clr（）{
f1.reason.value=“”
f1.amount.value=“”
}
函数updatedi（）{
z+=parseInt（a）；
document.getElementById（“decp”）.textContent=z；
}
函数updatede（）{
x+=parseInt（a）；
document.getElementById（“decm”）.textContent=x；
}
职能预算（）{
l=document.getElementById（'decp'）.textContent；
m=document.getElementById（'decm'）.textContent；
n=l-m；
document.getElementById（'bud'）。textContent=n；
}
函数addinc（）{
add='
addincv
i0
'
newadd=add.replace（'addincv'，r）；
newadd=newadd.replace（'i0'，a）；
document.getElementById（“in”）.insertAdjacentHTML（“beforeend”，newadd）；
}
函数addexp（）{
sub='
addexpv
e0
'
g+=1；
h='e'+g；
i='ev'+g；
newsub=sub.replace（'addexpv'，r）；
newsub=newsub.replace（'e0'，a）；
newsub=newsub.replace（'exp1'，h）；
newsub=newsub.replace（'expv1'，i）；
document.getElementById（“ex”）.insertAdjacentHTML（“beforeed”，newsub）；
}
功能rett（a）{
mkkt=a；
控制台日志（mkkt）；
mkt=mkkt.子串（1，mkkt.长度）
控制台日志（mkt）
var elem=document.querySelector（'.e1'）；
elem.parentNode.removeChild（elem）；
}

首先，您的代码中有几个关键问题，我们应该在继续解决之前解决它们。您正在添加具有相同id的费用部分

<div id="ee" class="e1">
<div id="ee" class="e2">

这样，生成的类名（e1、e2、e3..）将成为元素的唯一id。 现在在remove函数中，您可以通过元素的特定id访问元素并将其删除。但是，您单击按钮，但需要访问its容器的id。因此，将整个元素作为参数传递：

onclick="rett(this);

修改rett函数，如下所示：

function rett(a){
  mkkt=a.parentNode.parentNode.id;
  console.log(mkkt);
  mkt= mkkt.substring(1,mkkt.length)
  console.log(mkt)


  var elem = document.querySelector("#" + mkkt);
  elem.parentNode.removeChild(elem);    
 } 

此函数现在基本上执行以下操作： 由于要删除的元素是输入所在表单的容器，因此需要向上访问两级父级，然后删除该元素。因此，

a.parentNode.parentNode.id

notation将获得该id。 查询选择器也应该是参数化的。它以前有一个静态e1参数。现在它已更改为动态id

一般解决方案如上所述。您也不应该忘记添加null和未定义的控件

function rett(a){
  mkkt=a.parentNode.parentNode.id;
  console.log(mkkt);
  mkt= mkkt.substring(1,mkkt.length)
  console.log(mkt)


  var elem = document.querySelector("#" + mkkt);
  elem.parentNode.removeChild(elem);    
 }