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>}
}
HTML：
<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>
以上就是小编为大家带来的JS实现动态增加和删除li标签行的实例代码全部内容了，希望大家多多支持小牛知识库~
-
本文向大家介绍js实现删除li标签一行内容，包括了js实现删除li标签一行内容的使用技巧和注意事项，需要的朋友参考一下 利用面向对象思想完成买家信息删除功能，每一条信息包含： 姓名（name） 性别（sex） 电话号码（number） 省份（province） 实现以下要求： 不能借用任何第三方库，需要使用原生代码实现。 结合给出的基本代码结构，在下方2处code here补充代码，完成买家信息的
-
本文向大家介绍JS点击动态添加标签、删除指定标签的代码，包括了JS点击动态添加标签、删除指定标签的代码的使用技巧和注意事项，需要的朋友参考一下 1.div标签 2.js 补充： 下面看下js-动态生成小圆点（根据轮播图图片张数动态生成小圆点） 动态生成小圆点（根据轮播图图片张数动态生成小圆点）
-
本文向大家介绍jquery 动态增加删除行的简单实例(推荐)，包括了jquery 动态增加删除行的简单实例(推荐)的使用技巧和注意事项，需要的朋友参考一下 最近写程序，碰巧有动态增加删除行，下面就记录一下 html就不写了，也没有什么，直接上核心了 新增行 好，下面我们看下addTr方法~~这个是在网上找到的，还是蛮好用的 删除行，这个就比较简单了 动态添加删除行，就这么几行代码，方便大家使用 p
-
本文向大家介绍jQuery动态添加与删除tr行实例代码，包括了jQuery动态添加与删除tr行实例代码的使用技巧和注意事项，需要的朋友参考一下 这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子 下面是实现的样子,当然没有样式： 点击添加按钮可以添加一行： 点击删除可以删除本行： 基本功能是这样，下面是代码： 总结 以上就是jQuery动态添加与删除tr行的全部内容，希望本文
-
本文向大家介绍JavaScript实现动态添加，删除行的方法实例详解，包括了JavaScript实现动态添加，删除行的方法实例详解的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现动态添加，删除行的方法。分享给大家供大家参考。具体如下： JavaScript实现动态的增加或删除table的行 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍Vue.js动态添加、删除选题的实例代码，包括了Vue.js动态添加、删除选题的实例代码的使用技巧和注意事项，需要的朋友参考一下 大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 js代码 css代码 以上所述是小编给