使用javascript删除特定的表单元素

时间:2013-12-12 15:07:55

标签: javascript html forms removechild

我正在尝试创建使用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>

1 个答案:

答案 0 :(得分:0)

您应该为要添加到页面的每个元素生成唯一ID。 每次添加元素时,您都可以使用变量并递增此变量。在你的例子中,变量'patient'就足够了。

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

我希望它可以帮到你