Удаление определенного элемента формы с помощью javascript

Question

Я пытаюсь создать для удаления элемента формы с помощью javascript. Когда я удаляю элемент, он удаляет самый верхний элемент. Я пытаюсь удалить определенный элемент. Вот ссылка на страницу, а ниже - код. Любая помощь будет оценена, спасибо! http://training.cvrc.virginia.edu/test.html

<script type="text/javascript"> 
var patient = 0; 
function add_patient() { 
patient++; 
    var add= document.createElement('patientdiv'); 
    add.innerHTML += "<div id=removepatient></br>Patient "+patient+" Name/ID:<input type=text name=patients[] ><input type=button id=more_fields onclick=removepatient(); value='Remove' ></div>"; 
    document.getElementById('patientdiv').appendChild(add); 
    return false; 
} 

function removepatient() { 
    var elem = document.getElementById('removepatient'); 
    elem.parentNode.removeChild(elem); 
    return false; 
} 
</script> 


<div id=patientdiv></div> 
<input type=button id=more_fields onclick=add_patient(); value='Add Patient'></br></br> 

Answer 1

Вы должны сгенерировать уникальный идентификатор для каждого элемента, который вы добавляете к странице. Вы можете использовать переменную и увеличивать эту переменную каждый раз, когда элемент добавляется. В вашем примере переменной «пациент» достаточно.

add.innerHTML += "<div id=removepatient_"+patient"></br>Patient "+patient+" Name/ID:<input type=text name=patients[] ><input type=button id=more_fields"+patient+" onclick=removepatient("+patient+"); value='Remove' ></div>"; 

Вы должны также добавить параметров в вашей функции удаления:

function removepatient(patient) { 
    var elem = document.getElementById('removepatient_'+patient); 
    elem.parentNode.removeChild(elem); 
    return false; 
} 

Я надеюсь, что это поможет вам