东莞抖音微信小程序_bootstrap 通过加减按钮完成输

2021-01-11 13:04 admin
bootstrap 通过加减按钮实现输入框组功能       这篇文章主要介绍了bootstrap 输入框组 通过加减按钮来增加删除内嵌输入框组,当我点击 + 按钮时,会添加一行输入框组;当点击 - 按钮时,会删除这一行输入框组。具体实现代码大家参考下本文

实现效果图如下:

当我点击 + 按钮时,会添加一行输入框组;当点击 - 按钮时,会删除这一行输入框组

html代码如下:

 div id="centerIpGroup" 
 label id="basic-addon5" 中心机IP: /label 
 button type="button" data-toggle="tooltip" title="新增" id="addCenterIpGrpBtn" disabled span /span /button 
 /div 

+ 按钮 点击触发事件函数:

//添加中心机IP输入框项 
 function addCenterIpGrp(obj){ 
 html = ' div '+ 
 ' label IP: /label '+ 
 ' input type="text" id="ipInput" '+ 
 ' label 注释: /label '+ 
 ' input type="text" id="descInput" '+ 
 ' span '+ 
 ' button type="button" data-toggle="tooltip" title="删除" id="delCenterIpGrp" span /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 加减删除输入框组,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!