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标签行的实例代码全部内容了，希望大家多多支持毛票票~