首页 / 脚本样式 / JavaScript / JS实现动态增加和删除li标签行的实例代码

function addDepartment（）{<span style="white-space:pre"></span>var x = document.getElementById（"department"）;<span style="white-space:pre"></span>var l = x.childNodes.length;<span style="white-space:pre"></span>var li = document.createElement（"li"）;<span style="white-space:pre"></span>li.className = "list_nr_bg";<span style="white-space:pre"></span>li.innerHTML = "<span class="nr6"><select name="institute"><c:if test="${baseInstitutes ！=null}"><c:forEach items="${baseInstitutes}" var="baseInstitute"><option value="${baseInstitute.id}">${baseInstitute.instituteName}</option></c:forEach></c:if></select></span><span class="nr6">专业：</span><span class="nr6"><input name="specialty" type="text"></span><span><input type="button" onclick="deleteDepartment（this）" value="删除"></span>";<span style="white-space:pre"></span>x.appendChild（li）;}function deleteDepartment（obj）{<span style="white-space:pre"></span>if（window.confirm（"确认删除吗？"））{<span style="white-space:pre"></span>var li = obj.parentNode.parentNode; //获得当前行<span style="white-space:pre"></span>var ul = li.parentNode;//获得上一级标签<span style="white-space:pre"></span>ul.removeChild（li）; //删除当前行<span style="white-space:pre"></span>} else {<span style="white-space:pre"></span>return false;<span style="white-space:pre"></span>}}

<ul id="department"><span style="white-space:pre"></span><li class="list_nr_bg"><span style="white-space:pre"></span><span class="nr6">所属院系：</span><span style="white-space:pre"></span><span><input type="button" onclick="addDepartment（）" value="增加"></span><span style="white-space:pre"></span></li><span style="white-space:pre"></span><li class="list_nr_bg"><span style="white-space:pre"></span><span class="nr6"><span style="white-space:pre"></span><select name="institute"><span style="white-space:pre"></span><c:if test="${baseInstitutes ！=null}"><span style="white-space:pre"></span><c:forEach items="${baseInstitutes}" var="baseInstitute"><span style="white-space:pre"></span><option value="${baseInstitute.id}">${baseInstitute.instituteName}</option><span style="white-space:pre"></span></c:forEach><span style="white-space:pre"></span></c:if><span style="white-space:pre"></span>/select><span style="white-space:pre"></span></span><span style="white-space:pre"></span><span class="nr6">专业：</span><span style="white-space:pre"></span><span class="nr6"><input name="specialty" type="text"></span><span style="white-space:pre"></span></li></ul>