<li>11111111111111111</li>
<li>22222222222222222</li>
<li>33333333333333333</li>
<li>44444444444444444</li>
<li>55555555555555555</li>
</ul>
<input type="button" value="删除第2行" onclick="del(2)">
<input type="button" value="删除第3行" onclick="del(3)">
<input type="button" value="添加到最后行" onclick="add(-1,'最后行')">
<input type="button" value="添加到第二行" onclick="add(2,'第二行')">
<script>
function del(n)
{
var s=document.getElementById('s')
var t=s.childNodes.length
for (var i=0i<ti++)
{
if (i==n-1)
{
s.removeChild(s.childNodes[i])
}
}
}
function add(n,txt)
{
var s=document.getElementById('s')
var t=s.childNodes.length
var li= document.createElement("li")
li.innerHTML=txt
for (var i=0i<ti++)
{
if (n==-1)
{
s.appendChild(li)
}
else if (i==n-1)
{
s.insertBefore(li,s.childNodes[i])
}
}
}
</script>
window.onload = function () {const params = document.getElementById('params')
const ul = params.querySelector('ul')
const addBtn = ul.querySelector('#add')
addBtn.onclick = function (e) {
const newli = document.createElement('li')
newli.appendChild(document.createElement('input'))
const btn = document.createElement('input')
btn.setAttribute('type', 'button')
btn.setAttribute('value', '删除')
btn.setAttribute('opt-type', 'del')
newli.appendChild(btn)
ul.appendChild(newli)
}
ul.onclick = function (e) {
const target = e.target
const optType = target.getAttribute('opt-type')
if (target.nodeName === 'INPUT' && target.type === 'button' && optType === 'del') {
this.removeChild(target.parentNode)
}
}
} <div id="params">
<ul>
<li><input type="text"><input id="add" type="button" value="添加一行"></li>
</ul>
</div>
点击"添加一行",生成一条li,包含input,然后append进ul里边。点击删除,用ul删除按钮父元素li。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)