CODEWITHSUNDEEP
jqueryinput
Mara Barn
Mara Barn

Reputation: 149

Remove input on click in this specific code

I have this code that works fine, each time I click on "Add field" it will add new input field.

But I can't figure out how to implement the code to remove those fields if clicked on "Remove field".

Anyone that can help? 

<a id="add-another" href="#">Add field</a>
<a id="remove-field" href="#">Remove field</a>

<script>
jQuery(document).ready(function ($) {
    var $field = $('.iphorm_1_3'); 
    $field.attr('name', $field.attr('name') + '[]');

    $('#add-another').click(function () {
        var $clone = $field.clone();
        $clone.val('').css({ display: 'block' }).appendTo($field.parent());
        return false;
    });

    $('#remove-field').click(function () {
      WHAT TO ADD HERE TO REMOVE THEM ONE BY ONE IF CLICKED?
    });


});

Here is example of the form on this test page: http://woodpharmacy.fusionidea.com/dddddddd/

Upvotes: 0

Views: 26

Answers (1)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

Use this. Since you have a variable $field you can find its siblings and select the last sibling using :last selector and remove it.

$('#remove-another').click(function (e) {
  $field.siblings(":last").remove();
  e.preventDefault();
});

Edit: Your webpage has remove-another as id but in question you have posted remove-field.

Upvotes: 1

Related Questions