動態刪除輸入/ DOM錯誤

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

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>

Answer 1

你函數是正確只需添加放慢參數「這個工作代碼「當你把這個函數放在onclick屬性中時，像這樣：

onclick="removeJob(this)" 

Answer 2

唔，由於每人下面通過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>

希望這將幫助你:)