Javascript 将表单输入放在同一行2次后失败

我有一个表单输入，当我按下add按钮（输入名称2，名称3）时，我想在同一行中添加一些额外的输入

如果我按一下添加按钮，我已经完成了哪些操作。2次后，对齐被破坏

var计数器6=0；
$（“#formType1”）
.on（'click'，'addButton6'，函数（）{
计数器6++；
变量$template=$（'#dose1.col-md-1.col-sm-2'），
$clone=$template
.clone（）
.removeClass（'hide'））
.removeAttr（'id'））
.attr（'data-dose1-index'，计数器6）
.insertBefore（$template.parent（））；
//更新名称属性
$clone
.find（'[name=“strofes”]'）.attr（'name'，'strofes-'+counter6.end（）；
var$template=$（'dose2.col-md-1.col-sm-2'），
$clone=$template
.clone（）
.removeClass（'hide'））
.removeAttr（'id'））
.attr（'data-dose1-index'，计数器6）
.insertBefore（$template.parent（））；
$clone
.find（'[name=“uesi”]'）.attr（'name'，'uesi-'+counter6.end（）；
})
//删除按钮单击处理程序
.on（'click'，'removeButton6'，函数（）{
计数器6=计数器6-1；
var$row=$（this）.parents（'.form group'），
index=$row.attr（'data-dose1-index'）；
//删除包含字段的元素
$row.remove（）；
});

标题
名称1
姓名2
名字3
名字4
问题在于用于克隆模板的类。您必须对脚本和HTML进行一些更改。这些变化如下所述-

1-将第一次出现的$template和$clone替换为此

var $template = $('#dose1'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose1-index', counter6)
                        .insertBefore($template);

var $template = $('#dose2'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose2-index', counter6)
                        .insertBefore($template);

<!----- #dose1--->
<div id="dose1" class="hide">
    <div class="col-md-1 col-sm-2 ">                      
       <input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
    </div>
    <div class="col-xs-1">
         <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
     </div>
  </div>

<!------- #dose2 ----------->

<div id="dose2" class="hide">
   <div class="col-md-1 col-sm-2">                      
       <input type="number" min="0" step="0.1" class="form-control" name="uesi" required="">
   </div>
   <div class="col-xs-1">
       <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
    </div>
</div>

2-将第二次出现的$template和$clone替换为此

var $template = $('#dose1'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose1-index', counter6)
                        .insertBefore($template);

var $template = $('#dose2'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose2-index', counter6)
                        .insertBefore($template);

<!----- #dose1--->
<div id="dose1" class="hide">
    <div class="col-md-1 col-sm-2 ">                      
       <input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
    </div>
    <div class="col-xs-1">
         <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
     </div>
  </div>

<!------- #dose2 ----------->

<div id="dose2" class="hide">
   <div class="col-md-1 col-sm-2">                      
       <input type="number" min="0" step="0.1" class="form-control" name="uesi" required="">
   </div>
   <div class="col-xs-1">
       <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
    </div>
</div>

在这里，我得到了#dose1和#dose2的内部HTML，并将其插入到它们的父div之前

3-在HTML中，用这个替换#dose2 div

var $template = $('#dose1'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose1-index', counter6)
                        .insertBefore($template);

var $template = $('#dose2'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose2-index', counter6)
                        .insertBefore($template);

<!----- #dose1--->
<div id="dose1" class="hide">
    <div class="col-md-1 col-sm-2 ">                      
       <input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
    </div>
    <div class="col-xs-1">
         <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
     </div>
  </div>

<!------- #dose2 ----------->

<div id="dose2" class="hide">
   <div class="col-md-1 col-sm-2">                      
       <input type="number" min="0" step="0.1" class="form-control" name="uesi" required="">
   </div>
   <div class="col-xs-1">
       <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
    </div>
</div>

问题在于用于克隆模板的类。您必须对脚本和HTML进行一些更改。这些变化如下所述-

1-将第一次出现的$template和$clone替换为此

var $template = $('#dose1'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose1-index', counter6)
                        .insertBefore($template);

var $template = $('#dose2'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose2-index', counter6)
                        .insertBefore($template);

<!----- #dose1--->
<div id="dose1" class="hide">
    <div class="col-md-1 col-sm-2 ">                      
       <input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
    </div>
    <div class="col-xs-1">
         <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
     </div>
  </div>

<!------- #dose2 ----------->

<div id="dose2" class="hide">
   <div class="col-md-1 col-sm-2">                      
       <input type="number" min="0" step="0.1" class="form-control" name="uesi" required="">
   </div>
   <div class="col-xs-1">
       <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
    </div>
</div>

2-将第二次出现的$template和$clone替换为此

var $template = $('#dose1'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose1-index', counter6)
                        .insertBefore($template);

var $template = $('#dose2'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose2-index', counter6)
                        .insertBefore($template);

<!----- #dose1--->
<div id="dose1" class="hide">
    <div class="col-md-1 col-sm-2 ">                      
       <input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
    </div>
    <div class="col-xs-1">
         <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
     </div>
  </div>

<!------- #dose2 ----------->

<div id="dose2" class="hide">
   <div class="col-md-1 col-sm-2">                      
       <input type="number" min="0" step="0.1" class="form-control" name="uesi" required="">
   </div>
   <div class="col-xs-1">
       <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
    </div>
</div>

在这里，我得到了#dose1和#dose2的内部HTML，并将其插入到它们的父div之前

3-在HTML中，用这个替换#dose2 div

var $template = $('#dose1'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose1-index', counter6)
                        .insertBefore($template);

var $template = $('#dose2'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose2-index', counter6)
                        .insertBefore($template);

<!----- #dose1--->
<div id="dose1" class="hide">
    <div class="col-md-1 col-sm-2 ">                      
       <input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
    </div>
    <div class="col-xs-1">
         <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
     </div>
  </div>

<!------- #dose2 ----------->

<div id="dose2" class="hide">
   <div class="col-md-1 col-sm-2">                      
       <input type="number" min="0" step="0.1" class="form-control" name="uesi" required="">
   </div>
   <div class="col-xs-1">
       <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
    </div>
</div>


我还没有添加删除按钮我还没有添加删除按钮谢谢你的回答，我添加了删除按钮，但它根本没有出现是因为你更改了
$（'.#dose2.col-md-1.col-sm-2'），
？@Nat95你想在每个新创建的输入中添加“删除”按钮还是只添加一个删除按钮？你也可以在这里更新你的代码，这样我就可以检查它了。对于每一个新创建的输入，我还想有一个删除按钮。看这里，我还更改了question@Nat95我刚刚更新了我的答案。将脚本还原为最初发布的脚本，并删除了类（表单组）表单#dose1和#dose2 divs。另外，您还需要将代码的$row部分替换为var$row=$（this）.parent（）.parent（），在您的移除按钮处理程序中，现在应该可以工作了。感谢您的回答，我添加了移除按钮，但它根本没有出现，是因为您更改了
$（'#dose2.col-md-1.col-sm-2'），
？@Nat95是否要为每个新创建的输入添加“删除”按钮，还是只添加一个删除按钮？你也可以在这里更新你的代码，这样我就可以检查它了。对于每一个新创建的输入，我还想有一个删除按钮。看这里，我还更改了question@Nat95我刚刚更新了我的答案。恢复了s