未捕获类型错误无法读取 null 的属性父节点， 删除第二个费用要素时， 你能帮我解决这个问题吗 我无法理解为什么会发生这种情况， 尝试解决在互联网上看到各种解决方案， 但没有成功。
我添加金额和原因，然后单击费用添加费用， 然后，当我尝试通过单击 x 按钮来删除费用时，当我尝试删除第二个元素时，特定的费用元素将被删除，我收到此错误: 151 Uncaught TypeError: Cannot read property 'parentNode' of null, when moving the 2nd expend element
<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。 现在在删除函数中，您可以通过元素的特定 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 和未定义的控件。
关于javascript - 151 删除第二个费用元素时未捕获类型错误 : Cannot read property 'parentNode' of null,，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54002736/