Eingang/DOM-Fehler dynamisch entfernen

Question

Ich konnte einen Abschnitt eines Formulars erstellen, der beim Klicken auf eine Schaltfläche dynamisch eine Reihe von Eingaben hinzufügt. Dieses neue div wird nach dem vorherigen div angehängt und ich versuche, eine Schaltfläche zu erstellen, die die Ebene auch entfernen kann, wenn der Benutzer sie nicht benötigt.

Mein Problem ist, ich kann nicht scheinen, die divs zu entfernen. Ich kann hinzufügen, aber nicht entfernen. Wenn ich auf das DOM schaue, kann ich sehen, wenn die Schaltfläche addDiv angeklickt wird, fügt es tatsächlich das div hinzu und der gesamte Inhalt ist innerhalb des div, so dass es richtig angehängt wird. Aber wenn ich versuche, den neu angefügten div entfernen von ihm übergeordnete Element ist, bekomme ich folgende Fehlermeldung ausgegeben:

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

Ich bin nicht sicher, wie meine removeJob() Funktion in einer Weise definiert zu machen, die genau das Gegenteil von, wie Es wurde hinzugefügt.

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

Sie Funktion, um die Paramter „dieses Add helfen msgstr "" "Wenn Sie die Funktion in das onclick - Attribut setzen:

onclick="removeJob(this)" 

Answer 2

Nun, Per Below Diskussion this im Parameterübergabe ist der beste Weg, dies zu erreichen.

Unten ist der Arbeitscode für 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>

der Hoffnung, das Sie :) Recht gerade ist