The technique of adding and removing input-group of input frame group based on Bootstrap using jquery _javascript

This article for everyone to share the use of jquery implementation of the input frame group Input-group Add and delete operations for your reference, the specific contents are as follows

Note that the input box group for the bootstrap frame is required here, such as:

<div class= "Row" > 
 <div class= "col-lg-6" > 
 <div class= "Input-group" > 
  <span class= " Input-group-addon "> 
  <input type=" checkbox "aria-label=" ... "> 
  </span> 
  <input type=" Text "class=" Form-control "aria-label=" ... "> 
 </div><!--/input-group--> 
 </div><!- -/.col-lg-6--> 
 <div class= "col-lg-6" > 
 <div class= "Input-group" > 
  <span class= " Input-group-addon "> 
  <input type=" Radio "aria-label=" ... "> 
  </span> 
  <input type=" Text "class=" Form-control "aria-label=" ... "> 
 </div><!--/input-group--> 
 </div>< !--/.col-lg-6--> 
</div><!--/.row--> 

Demo Case's effect chart:

This provides a homemade plugin inputgroup.js

parameter is whether the control in the middle of the input box group is a text field or an input box, and the contents of the action that is set to the right of the input box group.

Using Inputgroup.js, simply add a selector to the corresponding container, such as a Div, and then use jquery to get the jquery object for the selector and invoke the Initinputgroup method.
Inputgroup.js

/** * Created by Dreamboy on 2016/4/29.  */$ (function () {$.fn.initinputgroup = function (options) {//1.settings initialization set var c = $.extend ({' Widget ': ' Input ', ' Add ': "<span class=\" Glyphicon glyphicon-plus\ "></span>", ' del ': "<span class=\" Glyphi 
 
  Con glyphicon-minus\ "></span>"}, Options); 
 
  var _this = $ (this); 
 
  Add Addinputgroup (1) of the input frame with serial number 1; /** * Add the input box group with ordinal order * @param the ordinal/function Addinputgroup (order) {//1 of the Order Input box group. Create Input Box Group Var Inpu 
   Tgroup = $ ("<div class= ' input-group ' style= ' margin:10px ' 0 ' ></div>"); 
   2. Input box Group ordinal var inputGroupAddon1 = $ ("<span class= ' Input-group-addon ' ></span>"); 
 
   3. Set the input box group ordinal inputgroupaddon1.html ("" + Order + ""); 
   4. Create input control in the input box group (inputs or textarea) var widget = ', inputGroupAddon2; if (C.widget = = ' textarea ') {widget = $ ("<textarea class= ' Form-control ' style= ' resize:vertical ') 
  ></textarea> ");  InputGroupAddon2 = $ ("<span class= ' Input-group-addon ' ></span>"); 
    else if (c.widget = = ' input ') {widget = $ ("<input class= ' Form-control ' type= ' text '/>"); 
   InputGroupAddon2 = $ ("<span class= ' input-group-btn ' ></span>"); //5. Create the Back action button in the Input box group var addbtn = $ ("<button class= ' btn btn-default ' type= ' button ' >" + c.add + "</butt 
   On> "); 
     Addbtn.appendto (InputGroupAddon2). On (' click ', Function () {//6. Response Delete and Add Action button event if ($ (this). html () = C.del) { 
    $ (this). Parents ('. Input-group '). Remove (); 
     else if ($ (this). html () = = C.add) {$ (this). html (C.del); 
    Addinputgroup (order+1); 
   //7. Reorder the input Box Group ordinal resort (); 
 
   }); 
 
   Inputgroup.append (InputGroupAddon1). Append (widget). append (InputGroupAddon2); 
  _this.append (Inputgroup); 
   Function Resort () {var child = _this.children (); $.each (Child, function (i) {$ (this). Find (". Input-group-addon"). EQ (0). html (' + (i + 1) + '); 
  }); 
 } 
 } 
});

Demo Case--inputgroupdemo
The directory structure is as follows:

Index.html

<! DOCTYPE html>  

If the intermediate controls in the input box group require input, you can set:

$ ('. Input-group-add '). Initinputgroup ({' 
    widget ': ' Input ',///input box in the middle of space type/ 
    * ' Add ': ' adding ', 
    ' del ': ' Delete ' * * 
   }); 

Or do not set, because the default intermediate control is input.
The effect of an intermediate control for input is as follows:

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn.