使用jQuery添加移除输入字段 [英] Adding removing input fields using jQuery

问题描述

我在点击按钮时添加输入字段，同时给删除按钮删除输入字段。但是，我的删除按钮不会删除输入字段，而是将我带到页面的顶部...

 < div class =input_fields_wrap> 
< div class =form-group> 
< label class =col-md-3 control-labelfor =example-text-input>首选工作位置< / label> 
< div class =col-md-3> 
< input type =textid =locname =Work_Location []class =form-control> 
< / div> 
< button class =add_field_button>添加更多地点< / button> 
< / div> 
< / div> 
  

及以下是我点击按钮时添加更多文本框的jQuery

 < script> 
 $（document）.ready（function（）{
 var max_fields = 10; //允许的最大输入框数
 var wrapper = $（。input_fields_wrap）; // Fields wrapper 
 var add_button = $（。add_field_button）; //添加按钮ID 
 
 var x = 1; // initlal文本框计数
 $（add_button）.click（function （e）{//在添加输入按钮时点击
 e.preventDefault（）; 
 if（x  x ++; //文本框增量
 $（wrapper）.append（'< div class =form-group>< label class =col-md-3 control-labelfor =example-text-input>首选工作地点< / label>< div class =col-md-3>< input type =textid =locname =Work_Location []class =form-control> < / div>< a href =＃class =remove_field>删除< / a>< / div>'）; //添加输入框
} 
}）; 
 
 $（wrapper）.on（click，。remove_field，function（e）{//用户点击rem ove text 
 e.preventDefault（）; $（本）.parent（ DIV）删除（）。 X - ; 
}）
}）; 
< / script> 
  

解决方案

我有一个例子，你可以做到更容易

  $（ '＃名单'）; var item = container.find（'。default'）。clone（）; item.removeClass（缺省）; //添加任何你喜欢的东西，例如：item.addClass（'abc'）.... item.appendTo（container）.show（）;}  

< pre class =snippet-code-html lang-html prettyprint-override> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery .min.js>< / script>< ul id =list> < li class =defaultstyle =display：none;> < input type =text/>< span style =cursor：pointer;的onclick = closeMe（本）; >靠近< /跨度> < / li>< / ul><按钮onclick =addMore（）;>添加< / button>

I am adding input field on clicking the button and at the same time giving remove button to remove the input field.However my remove button is not removing the input field instead it takes me to top of page...

<div class="input_fields_wrap">
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
<button class="add_field_button">Add More Locations</button>
</div>
</div>

and below is the jQuery to add more textbox when I click the button

<script>
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="form-group"><label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label><div class="col-md-3"> <input type="text" id="loc" name="Work_Location[]" class="form-control"  ></div><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

解决方案

I have an example for you, you can do it easier

function closeMe(element) {
  $(element).parent().remove();
}

function addMore() {
  var container = $('#list');
  var item = container.find('.default').clone();
  item.removeClass('default');
  //add anything you like to item, ex: item.addClass('abc')....
  item.appendTo(container).show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="list">
    <li class="default" style="display: none;">
        <input type="text" /><span style="cursor: pointer;" onclick="closeMe(this);">close</span>
    </li>
</ul>
<button onclick="addMore();">Add</button>

这篇关于使用jQuery添加移除输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！