未捕获类型错误无法读取null的属性父节点，当去除第二费用元素时，你能帮我解决这个问题吗，我不明白为什么会发生这种事，尝试解决在互联网上看到的各种解决方案，但并不成功。
我添加金额和原因，然后点击费用，费用被添加，然后，当我试图通过单击x按钮来删除开支时，当我尝试删除第二个元素时，特定的开支元素被删除了，我得到了这个错误：151 Uncaught TypeError:无法读取null的属性'parentNode'，当删除第二开支元素时
<body>
<div id="p1">
<center>
<h3>Total Budget</h3>
<p id="bud">0</p> <br>
<div id="dti">
<P id="dec1">Income</P>
<p id="decp">0</p>
</div>
<br>
<div id="dte">
<P id="dec1">Expense</P>
<p id="decm">0</p>
</div>
</center>
</div>
<div id="p2">
<center>
<form name="f1" id="f1">
<input type="text" name="reason" id="reason" placeholder="Reason" style="width: 200px; height: 30px;" >
<input type="text" name="amount" id="amount" placeholder="Amount" style="width: 100px; height: 30px;">
<input type="button" value="Income" onclick="inc()" style="width: 100px; height: 30px;">
<input type="button" value="Expense" onclick="exp()" style="width: 100px; height: 30px;">
</form>
</center>
</div>
<div id="p3">
<div id="in">
<br>
<center>
<h3>Income Details</h3>
</center>
<br>
</div>
<div id="ex">
<br>
<center>
<h3>Expense Details</h3>
</center>
<br>
</div>
<script>
var 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;
function inc(){
r=f1.reason.value;
a=f1.amount.value;
clr();
updatedi();
budget();
addinc();
}
function exp(){
r=f1.reason.value;
a=f1.amount.value;
clr();
updatede();
budget();
addexp();
}
function clr(){
f1.reason.value=""
f1.amount.value=""
}
function updatedi(){
z +=parseInt(a);
document.getElementById("decp").textContent=z;
}
function updatede(){
x +=parseInt(a);
document.getElementById("decm").textContent=x;
}
function budget(){
l=document.getElementById('decp').textContent;
m=document.getElementById('decm').textContent;
n=l-m;
document.getElementById('bud').textContent=n;
}
function addinc(){
add='<div id="ii"><p id="pin1">addincv</p><p id="pin2">i0</p></div>'
newadd=add.replace('addincv',r);
newadd=newadd.replace('i0',a);
document.getElementById("in").insertAdjacentHTML('beforeend',newadd);
}
function addexp(){
sub='<div id="ee" class="exp1"><p id="pex1">addexpv</p> <form><input type="button" id="b1" onclick="rett(this.id);" value="x"></form> <p id="pex2" class="expv1">e0</p> </div>'
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('beforeend',newsub);
}
function rett(a){
mkkt=a;
console.log(mkkt);
mkt= mkkt.substring(1,mkkt.length)
console.log(mkt)
var elem = document.querySelector('.e1');
elem.parentNode.removeChild(elem);
}
</script>
</body>首先，您的代码中存在几个关键问题，我们应该在继续解决方案之前解决这些问题。您正在添加具有相同id的支出部分。
<div id="ee" class="e1">
<div id="ee" class="e2">
但是，id在DOM中应该是唯一的。然后，您可以通过元素的id轻松地删除它们。因此，在addexp函数中，更改以下行：
newsub=newsub.replace('ee',h);
通过这样做，您生成的类名(e1、e2、e3..)将成为元素的唯一id。现在在remove函数中，您可以通过元素的特定id访问元素并将其移除。但是，您单击按钮，但您需要访问其容器的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表示法将获得该id。查询选择器也应该是参数化的。它以前有一个静态的e1参数。现在它被更改为动态id。
一般解决方案如上所述。您也不应该忘记添加null和未定义的控件。