remove input in add new input with jQuery. how is fix it?

Question

how can putting link add after last new input when click on remove no after last input that clicked on remove. how is it?

when you clicked on remove(no last remove) you see that link add append after input. Namely we have tow or several add link after clicked on remove. you in anywhere clicked on remove append link add on input, i want only once append in last new input no in anywhere.
I hope you understand

EXAMPLE: http://jsfiddle.net/zgWr3/12/

$('a.remove_input').live('click', function (event) {
                event.preventDefault();
                var $class =  '.' + $(this).closest('div.find_input').find('div').attr('class');
                $(this).closest($class).prev().find('.adda .mediumCell').append('<a href="" class="add_input"></a>')
                $(this).closest($class).remove();
            });

With respect

I'm really sorry, I tried for some time to understand what you are trying to do now. You want to add an input on every click, right? All of these newly added inputs should have a link to remove them, but there should only be one add button? Did I get that right? — GNi33
– GNi33, Commented Aug 10, 2011 at 22:55
yes, add button only for last new input and remove button for all except first input. but in my code $('a.remove_input') have problem!!! — Sheikhasa Mozali
– Sheikhasa Mozali, Commented Aug 10, 2011 at 23:00
okay. Looking at your code, I think you are approaching this problem a little too complicated. If you only have one add button, why do you even want to add a new one with javascript? Let the existing one stay there and only add the remove-buttons with functionality. I'll try it in a jsFiddle and show you — GNi33
– GNi33, Commented Aug 10, 2011 at 23:11

Adam Stacey · Accepted Answer · 2011-08-10 23:21:25Z

1

For my HTML I would use something like:

<div id="inputs">
    <div id="input_container_0">
        <input type="text" name="price" placeholder="hello" />
    </div>
</div>
<div>
    <a href="Javascript:void(0);" class="action-add">add</a>
</div>

For my JavaScript I would use something like:

var number_of_inputs = 0;
$(function() {
    $(".action-add").click(function() {
        number_of_inputs++;
        $("#inputs").append('<div id="input_container_'+number_of_inputs.toString()+'"><input type="text" name="price" placeholder="hello" />&nbsp;&nbsp;<a href="Javascript:void(0);" rel="'+number_of_inputs.toString()+'" class="action-remove">remove</a></div>');
    });
    $(".action-remove").live('click', function() {
        $("#input_container_"+$(this).attr("rel")).remove();
    });
});

Hope that helps.

EDIT

Updated, so the remove link is not present for the first text box.

edited Aug 10, 2011 at 23:21

answered Aug 10, 2011 at 23:14

Adam Stacey

2,8314 gold badges28 silver badges38 bronze badges

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

2 Comments

Sheikhasa Mozali Over a year ago

I do not use of a HTML code. i have used several different HTML they in a changing

Adam Stacey Over a year ago

Not sure what you mean? The HTML for the inputs are always changing?

Tom · Accepted Answer · 2011-08-10 23:17:06Z

0

Here. Try this:

$(function () {
    $('a.add_input').live('click', function (event) {

        var $column = $(this).closest('div.add_units');

        // clone the top input row
        var newDiv = $($column.find('div.mediumCell').get(0)).clone(true);
        // clear field values
        newDiv.find('input').val(''); // clear the field

        // add Remove link to new row
        newDiv.append('<a href="#" class="remove_input">remove</a>');

        $column.find('div.adda').before(newDiv);

        event.preventDefault();
        return false;
    });

    $('a.remove_input').live('click', function (event) {
        event.preventDefault();
        // find row
        $row = $(this).closest('.mediumCell').remove();
    });
});

edited Aug 10, 2011 at 23:17

answered Aug 10, 2011 at 23:11

Tom

9,2187 gold badges56 silver badges85 bronze badges

2 Comments

GNi33 Over a year ago

wow, this gives me a lot of remove-links, can you post the jsFiddle-Link?

Sheikhasa Mozali Over a year ago

I do not use of a HTML code. i have used several different HTML they in a changing

Collectives™ on Stack Overflow

remove input in add new input with jQuery. how is fix it?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related