實(shí)現(xiàn)效果圖如下：
當(dāng)我點(diǎn)擊 + 按鈕時(shí)，會(huì)添加一行輸入框組；當(dāng)點(diǎn)擊 - 按鈕時(shí)，會(huì)刪除這一行輸入框組
html代碼如下：
<div class="input-group" id="centerIpGroup"> <label class="input-group-addon" id="basic-addon5">中心機(jī)IP:</label> <button class="btn btn-info" type="button" data-toggle="tooltip" title="新增" id="addCenterIpGrpBtn" onclick="addCenterIpGrp(this)" disabled><span class="glyphicon glyphicon-plus"></span></button> </div>
+ 按鈕 點(diǎn)擊觸發(fā)事件函數(shù)：
//添加中心機(jī)IP輸入框項(xiàng) function addCenterIpGrp(obj){ html = '<div class="input-group centerIp">'+ '<label class="input-group-addon">IP：</label>'+ '<input type="text" class="form-control" id="ipInput">'+ '<label class="input-group-addon">注釋：</label>'+ '<input type="text" class="form-control" id="descInput">'+ '<span class="input-group-btn">'+ '<button class="btn btn-info" type="button" data-toggle="tooltip" title="刪除" id="delCenterIpGrp"><span class="glyphicon glyphicon-minus"></span></button>'+ '</span>'+ '</div>' obj.insertAdjacentHTML('beforebegin',html) } - 按鈕 點(diǎn)擊觸發(fā)事件函數(shù)：
$(document).on('click','#delCenterIpGrp',function(){ var el = this.parentNode.parentNode var centerIp = $(this).parent().parent().find('#ipInput').val() alertify.confirm('您確定要?jiǎng)h除選中的命令？', function(e){ if(e){ el.parentNode.removeChild(el)}})}) 總結(jié)
以上所述是小編給大家介紹的bootstrap 加減刪除輸入框組，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
