效果圖：（我用的是layui框架）
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>增加標籤</title>
</head>
<body>
<!-- 增加時間段的設計 -->
<div class="quantum">
<div class="layui-form-item">
<label class="layui-form-label">開始時間:</label>
<div class="layui-input-inline">
<input type="time" name="brgin[]" value="" placeholder="設置開始時間" required="required" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">設置活動開始時間</div>
<label class="layui-form-label">結束時間:</label>
<div class="layui-input-inline">
<input type="time" name="finish[]" value="" placeholder="設置結束時間" required="required" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">設置活動結束時間</div>
</div>
</div>
<button type="button" class="layui-btn layui-btn-normal left" id="add">增加時間規則</button>
<button type="button" class="layui-btn layui-btn-danger" id="reduce">刪除時間規則</button><br><br>
</body>
</html>
js代碼：
<!-- 增加時間段js -->
<script>
var number = 0;
var maximum = document.querySelector('.quantum'); //找到最大的div
var add = document.querySelector('#add'); //找到第三個第一個按鈕
add.onclick = function() {
var newly = document.createElement('div');
maximum.appendChild(newly);
number++;
newly.innerHTML =
`<div class="layui-form-item">
<label class="layui-form-label">開始時間:</label>
<div class="layui-input-inline">
<input type="time" name="brgin[]" value="" placeholder="設置開始時間" required="required"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">設置活動開始時間</div>
<label class="layui-form-label">結束時間:</label>
<div class="layui-input-inline">
<input type="time" name="finish[]" value="" placeholder="設置結束時間" required="required"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">設置活動結束時間</div>
</div> `;
}
var reduce = document.querySelector('#reduce'); //找到最後一個按鈕
reduce.onclick = function() {
var last = maximum.lastElementChild;
maximum.removeChild(last); //刪除節點
}
</script>
這樣成功了.....解釋一下 ``（反撇）這個符號，可以將我們平時寫的html內容直接寫進去，非常的方便，他就是tab鍵上面那個鍵，英文格式點擊一下就出來了
上面是無限增加，下面設置增到最大限制
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>增加標籤</title>
</head>
<body>
<!-- 增加時間段的設計 -->
<div class="quantum">
<div class="layui-form-item">
<label class="layui-form-label">開始時間:</label>
<div class="layui-input-inline">
<input type="time" name="brgin[]" value="" placeholder="設置開始時間" required="required" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">設置活動開始時間</div>
<label class="layui-form-label">結束時間:</label>
<div class="layui-input-inline">
<input type="time" name="finish[]" value="" placeholder="設置結束時間" required="required" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">設置活動結束時間</div>
</div>
</div>
<button type="button" class="layui-btn layui-btn-normal left" id="add">增加時間規則</button>
<button type="button" class="layui-btn layui-btn-danger" id="reduce">刪除時間規則</button><br><br>
</body>
</html>
js代碼：
<script>
var poll = $("#poll");//寫隱藏input框默認值爲1
$(function () {
var alls = "3";//最大到三個
if (poll.val() == 1) {
document.getElementById("reducenumber").disabled = true;
}
if (poll.val() == alls) {
document.getElementById("addnumber").disabled = true;
}
$("#addnumber").click(function () {
poll.val(parseInt(poll.val()) + 1);
if (poll.val() > alls) {
poll.val(parseInt(poll.val()) - 1);
}
if (poll.val() == alls) {
document.getElementById("addnumber").disabled = true;
}
document.getElementById("reducenumber").disabled = false;
addgroup() //執行增加分組函數
});
$("#reducenumber").click(function () {
poll.val(parseInt(poll.val()) - 1); //點擊減號輸入框數值減1
if (poll.val() <= 0) {
poll.val(parseInt(poll.val()) + 1); //最小值爲1
}
if (poll.val() == 1) {
//當我票數框內爲1的時候我的減票就不可以使用了
document.getElementById("reducenumber").disabled = true;
}
document.getElementById("addnumber").disabled = false;
reducegroup(); //執行減少分組函數
});
});
var number = 0; //聲明一個變量爲0 //下面用到爲了區分name值這裏使用
var maximum = document.querySelector('.quantum'); //找到最大的div
function addgroup() {
//聲明增加分組函數
var newly = document.createElement('div'); //聲明增加的標籤是什麼
maximum.appendChild(newly); //聲明在那個標籤裏面增加
number++; //數字增加1 //方便input框的name值不一樣
newly.innerHTML =
`<div class="layui-form-item">
<label class="layui-form-label">開始時間:</label>
<div class="layui-input-inline">
<input type="time" name="brgin[]" value="" placeholder="設置開始時間" required="required"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">設置活動開始時間</div>
<label class="layui-form-label">結束時間:</label>
<div class="layui-input-inline">
<input type="time" name="finish[]" value="" placeholder="設置結束時間" required="required"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">設置活動結束時間</div>
</div> `;
//所要增加的內容
}
function reducegroup() {
//聲明減少一個分組的函數
var last = maximum.lastElementChild; //查找maximum中最後的一個div
maximum.removeChild(last); //刪除節點
}
</script>