点击增增加按钮,增加一行数据,当仅有一条数据时,界面仅有增加按钮,当数据大于1时,显示减少按钮,减少按钮只出现在最后一条数据的最前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<ul id="ul_supplier" style="position: relative;">
<li id="li_supplier1">
<button id="btn_add" onclick="add()">增加</button>
<span id="text_inp_supplier1">1名称:</span>
<input id="inp_supplier1" type="text" placeholder="" />
</li>
</ul>
</div>
<script>
var ul_supplier = document.getElementById("ul_supplier")
var i = 1;
function add() {
i++
var liId = "li_supplier" + i
var spanId = "text_inp_supplier" + i
var inputId = "inp_supplier" + i
var btn_delId = "btn_del"+i
var content = '<button id="'+btn_delId+'" style="position:absolute;bottom:0;" onclick="del('+i+')">减少</button>'+'<span id="' + spanId + '">' + i + '名称:</span>' + '<input id="' + inputId + '" type="text" />'
var li_supplier = document.createElement("li")
li_supplier.id = liId
li_supplier.innerHTML = content
ul_supplier.appendChild(li_supplier)
}
function del(del_i) {
var delid = "btn_del"+del_i
var del_ = document.getElementById(delid)
del_.parentNode.parentNode.removeChild(del_.parentNode)
i--
}
</script>
</body>
</html>