Remove input on click in this specific code

Question

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/

So when you press remove-field you want to remove from bottom or from top? — Rajshekar Reddy
– Rajshekar Reddy, Commented Dec 20, 2016 at 17:00

Rajshekar Reddy · Accepted Answer · 2016-12-20 17:17:29Z

1

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.

edited Dec 20, 2016 at 17:17

answered Dec 20, 2016 at 17:05

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dokgu Over a year ago

Removing and hiding are 2 completely different things. You might want to clarify that with OP.

Rajshekar Reddy Over a year ago

@uom-pgregorio I am removing it right.. Thats what the OP wants

dokgu Over a year ago

You had .hide() when I made my comment. Since you edited your answer already, just ignore it.

Mara Barn Over a year ago

Now the complete code is this but for some reason it doesn't work:

Mara Barn Over a year ago

No errors. This code is part of quform plugin, they give explanation how to add fields but not how to remove them, and i wanted to try. However it doesn't work with this code

|

Collectives™ on Stack Overflow

Remove input on click in this specific code

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related