JS实现动态增加和删除li标签行的实例代码
如下所示:
functionaddDepartment() { <spanstyle="white-space:pre"> </span>varx=document.getElementById('department'); <spanstyle="white-space:pre"> </span>varl=x.childNodes.length; <spanstyle="white-space:pre"> </span>varli=document.createElement("li"); <spanstyle="white-space:pre"> </span>li.className="list_nr_bg"; <spanstyle="white-space:pre"> </span>li.innerHTML="<spanclass='nr6'><selectname='institute'><c:iftest='${baseInstitutes!=null}'><c:forEachitems='${baseInstitutes}'var='baseInstitute'><optionvalue='${baseInstitute.id}'>${baseInstitute.instituteName}</option></c:forEach></c:if></select></span><spanclass='nr6'>专业:</span><spanclass='nr6'><inputname='specialty'type='text'></span><span><inputtype='button'onclick='deleteDepartment(this)'value='删除'></span>"; <spanstyle="white-space:pre"> </span>x.appendChild(li); } functiondeleteDepartment(obj) { <spanstyle="white-space:pre"> </span>if(window.confirm("确认删除吗?")){ <spanstyle="white-space:pre"> </span>varli=obj.parentNode.parentNode;//获得当前行 <spanstyle="white-space:pre"> </span>varul=li.parentNode;//获得上一级标签 <spanstyle="white-space:pre"> </span>ul.removeChild(li);//删除当前行 <spanstyle="white-space:pre"> </span>}else{ <spanstyle="white-space:pre"> </span>returnfalse; <spanstyle="white-space:pre"> </span>} }
HTML:
<ulid="department"> <spanstyle="white-space:pre"> </span><liclass="list_nr_bg"> <spanstyle="white-space:pre"> </span><spanclass="nr6">所属院系:</span> <spanstyle="white-space:pre"> </span><span><inputtype="button"onclick="addDepartment()"value="增加"></span> <spanstyle="white-space:pre"> </span></li> <spanstyle="white-space:pre"> </span><liclass="list_nr_bg"> <spanstyle="white-space:pre"> </span><spanclass="nr6"> <spanstyle="white-space:pre"> </span><selectname="institute"> <spanstyle="white-space:pre"> </span><c:iftest="${baseInstitutes!=null}"> <spanstyle="white-space:pre"> </span><c:forEachitems="${baseInstitutes}"var="baseInstitute"> <spanstyle="white-space:pre"> </span><optionvalue="${baseInstitute.id}">${baseInstitute.instituteName}</option> <spanstyle="white-space:pre"> </span></c:forEach> <spanstyle="white-space:pre"> </span></c:if> <spanstyle="white-space:pre"> </span>/select> <spanstyle="white-space:pre"> </span></span> <spanstyle="white-space:pre"> </span><spanclass="nr6">专业:</span> <spanstyle="white-space:pre"> </span><spanclass="nr6"><inputname="specialty"type="text"></span> <spanstyle="white-space:pre"> </span></li></ul>
以上就是小编为大家带来的JS实现动态增加和删除li标签行的实例代码全部内容了,希望大家多多支持毛票票~