Question

未捕获类型错误无法读取属性为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>

Answer 1

首先，您的代码中存在几个关键问题，我们应在继续解决方案之前解决它们。您要添加具有相同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和未定义的控件。

151 Uncaught TypeError：删除第二个费用元素时，无法读取null的属性“ parentNode”

1 个答案: