Bootstrap implements input box group function example sharing through add and subtract buttons

This article mainly introduces the bootstrap input box group by adding and subtracting buttons to add and delete inline input box groups. When I click the + button, a row of input box groups will be added; when I click the - button, this row of input boxes will be deleted. Group. Please refer to this article for the specific implementation code, I hope it can help you.

The implementation effect diagram is as follows:

When I click the + button, a row of input box groups will be added; when I click the - button, this row will be deleted The input box group

html code is as follows:

<p 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>    
</p>

+ Button click trigger event function:

##

//添加中心机IP输入框项 
  function addCenterIpGrp(obj){ 
    html = &#39;<p class="input-group centerIp">&#39;+ 
          &#39;<label class="input-group-addon">IP：</label>&#39;+ 
          &#39;<input type="text" class="form-control" id="ipInput">&#39;+ 
          &#39;<label class="input-group-addon">注释：</label>&#39;+ 
          &#39;<input type="text" class="form-control" id="descInput">&#39;+ 
          &#39;<span class="input-group-btn">&#39;+ 
                &#39;<button class="btn btn-info" type="button" data-toggle="tooltip" title="删除" id="delCenterIpGrp"><span class="glyphicon glyphicon-minus"></span></button>&#39;+ 
          &#39;</span>&#39;+ 
        &#39;</p>&#39; 
    obj.insertAdjacentHTML(&#39;beforebegin&#39;,html) 
  }

- Button click trigger event function:

$(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)}})})

Related recommendations:

Introducing a feature of the Bootstrap input box group

Using jQuery to add and delete the input box group input-group based on Bootstrap_javascript skills

JS input box word count real-time update tutorial

The above is the detailed content of Bootstrap implements input box group function example sharing through add and subtract buttons. For more information, please follow other related articles on the PHP Chinese website!