动态移除输入/ DOM错误

Dynamically Removing Inputs / DOM Error

本文关键字：DOM 错误 输入 动态      更新时间：2023-09-26

我已经能够在一个按钮点击时动态地添加一层输入。这个新的div被附加在前一个div之后，我正在尝试创建一个按钮，如果用户不需要它，它也可以删除层。

我的问题是我似乎不能删除div。我可以添加，但不能删除。当我查看DOM时，我可以看到当addDiv按钮被单击时，它确实添加了div，并且所有内容都在div中，因此它被正确添加。但是，当我试图从它的父元素中删除新添加的div时，会抛出以下错误:

addJob.js:18 Uncaught TypeError: Cannot read property 'parentNode' of undefinedremoveJob @ addJob.js:18onclick @ index.html:1

我不确定如何使我的removeJob()函数以与添加方式相反的方式定义。

CodePen: http://codepen.io/theodore_steiner/pen/WGEmGr 

var i = 0;
function addJob() {
  if (i <= 1) {
    i++;
    var div = document.createElement("div");
    div.innerHTML = '<input type="text" class="three-lines" name="schoolBoard_' + i + '"> '+ 
                     '<input type="text" class="three-lines" name="position_' + i + '"> '+
                     '<input type="text" class="three-lines" name="years_' + i + '">'+
                     '<input type="button" value="-" onclick="removeJob()">';
    document.getElementById("employmentHistory").appendChild(div);
  }
}
function removeJob(div) {
  document.getElementById("employmentHistory").removeChild(div.parentNode);
  i--;
};
button {
  height: 20px;
  width: 20px;
  background: none;
  margin-left: 10px;
  margin-top: 30px;
  margin-bottom: 25px;
}
input[type="button"] {
  height: 20px;
  width: 20px;
  background: none;
  border: 1px solid #ccc;
  outline: none;
  margin-left: 20px;
}
input[type="button"]:focus {
  outline: none;
}
input.three-lines {
  margin-left: 18px;
  background: none;
  border: none;
  border-bottom: 1px solid #b3c1cc;
  width: 150px;
  margin-bottom: 30px;
}
<div id="page2-content">
  <div class="input-group" id="previousTeachingExperience">
    <label id="teachingExpierience">Teaching Experience *</label>
    <div id="employmentHistory">
      <input type="text" class="three-lines" name="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='Email'" onfocus="this.placeholder=''" />
      <input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" />
      <input type="text" class="three-lines" name="years_1" />
      <input type="button" name="myButton" onclick="addJob()" value="+" />
    </div>

你的函数是正确的，只要在onclick属性中添加参数"this"，如下所示:

onclick="removeJob(this)"

那么，根据下面的讨论，在参数中传递 this 是实现此目的的最佳方法。

下面是- 的工作代码

var i = 0;
var div = null;
function addJob()
{
   
   if(i <= 1)
   {
        i++;
       div = document.createElement("div");
      div.innerHTML = '<input type="text" class="three-lines" name="schoolBoard_'+i+'"> <input type="text" class="three-lines" name="position_'+i+'"> <input type="text" class="three-lines" name="years_'+i+'"><input type="button" value="-" onclick="removeJob(this)">';
    
    document.getElementById("employmentHistory").appendChild(div);
   }
}
function removeJob(div)
{
    document.getElementById("employmentHistory").removeChild(div.parentNode);
    i--;
};
button
{
    height: 20px;
    width: 20px;
    background: none;
    margin-left: 10px;
    margin-top: 30px;
    margin-bottom: 25px;
}
input[type="button"]
{
    height: 20px;
    width: 20px;
    background: none;
    border: 1px solid #ccc;
    outline: none;
    margin-left: 20px;
}
input[type="button"]:focus
{
   outline: none;
}
input.three-lines
{
    margin-left: 18px;
    background: none;
    border: none;
    border-bottom: 1px solid #b3c1cc;
    width: 150px;
    margin-bottom: 30px;
}
<div id="page2-content">
                <div class="input-group" id="previousTeachingExperience">
                    <label id="teachingExpierience">Teaching Experience *</label>
                    <div id="employmentHistory">
                        <input type="text" class="three-lines" name="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='Email'" onfocus="this.placeholder=''" />
                        <input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" />
                        <input type="text" class="three-lines" name="years_1" />
                        <input type="button" name="myButton" onclick="addJob()" value="+" />
                    </div>

希望这将帮助你:)

相关文章：