克隆内联表单字段并追加到父容器

Question

I have the following form fields:

<div id="filename-url-container">
    <div class="form-inline form-group">
        <input name="filename[]" class="form-control" placeholder="Filename" type="text">
        <div class="input-group">
            <input name="url[]" class="form-control" placeholder="URL" type="text">
            <span class="input-group-btn">
                <button class="btn btn-default btn-add" type="button">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </span>
        </div>
    </div>
</div>

I want to grab the first child each time the button is pressed and append it to the bottom of the filename-url-container div without the values of the original cloned fields.

I tried to get this to work but it's not appending correctly:

$('#filename-url-container').on('click', '.btn-add', function (e) {
    e.preventDefault();
    var formGroup= $('#filename-url-container :first-child');
    $('#filename-url-container').append(formGroup);
    console.log(controlForm);
});

Answer 1

You should .clone the elements before appending them - as written your code would simply take the existing elements and try to move them to exactly the same place.

You also need to constrain your selector, else it will pick every :first-child element within the container, not just the one that's the immediate child:

$('#filename-url-container').on('click', '.btn-add', function (e) {
    var formGroup= $('#filename-url-container > :first-child').clone(true);
    formGroup.find('input').val('');   // erase values
    $('#filename-url-container').append(formGroup);
});

demo at http://jsfiddle.net/alnitak/dvqgnga0/

Answer 2

$('#filename-url-container').on('click', '.btn-add', function (e) {
    e.preventDefault();
    var formGroup= $('#filename-url-container div:first-child').html();
    $('#filename-url-container').append(formGroup);
    console.log(formGroup);
});

You need to append html, not object it self. http://jsfiddle.net/npdh2v3L/

Answer 3

I don't think you are using :first-child correctly. :first-child refers to the first child of the type to it's left. Other than that you just need to get rid of those values. Additionally, I'm not seeing a need to Event.preventDefault() since you are not using a submit button.

$('#filename-url-container .btn-add').click(function(){
  var clone = $('#filename-url-container .form-group:first-child').clone(true);
  clone.find('input').val('');
  $('#filename-url-container').append(clone);
});