bootstrap如何通過加減按鈕實現輸入框組功能

這篇文章將為大家詳細講解有關bootstrap如何通過加減按鈕實現輸入框組功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

實現效果圖如下：

當我點擊 + 按鈕時，會添加一行輸入框組；當點擊 - 按鈕時，會刪除這一行輸入框組

html代碼如下：

<div class="input-group" id="centerIpGroup"> 
  <label class="input-group-addon" id="basic-addon5">中心機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>

+ 按鈕 點擊觸發事件函數：

//添加中心機IP輸入框項 
  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) 
  }

- 按鈕 點擊觸發事件函數：

$(document).on('click','#delCenterIpGrp',function(){ 
  var el = this.parentNode.parentNode 
  var centerIp = $(this).parent().parent().find('#ipInput').val() 
  alertify.confirm('您確定要刪除選中的命令？', 
  function(e){ 
    if(e){ el.parentNode.removeChild(el)}})})

關于“bootstrap如何通過加減按鈕實現輸入框組功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。