Question

我已经能够创建一个表单的一部分，在按钮点击时动态添加一层输入。这个新的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

＆＃13;

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--;
};

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

你的功能是正确的，只需添加参数＆＃34;这个＆＃34;将函数放入onclick属性时，如下所示：

onclick="removeJob(this)"

Answer 2

嗯，按照下面的讨论，在参数中传递 this 是实现这一目标的最佳方法。

以下是此工作代码 -

＆＃13;

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--;
};

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

希望这会对您有所帮助：）

动态删除输入/ DOM错误

2 个答案: