CODEWITHSUNDEEP
javascriptjquery
Rails beginner
Rails beginner

Reputation: 14514

Jquery help selecting input field

I am trying to select the input field that is added when pressing the "add info" button.

Now the first input field is removed when pressed "Remove", it should be the input field that was added: http://jsfiddle.net/gDChA/14/ Jquery:

function findLastInput ( element ) {
  return $( element ).parent().prev().find('input').last();
}
$('button.add').click ( function(e) {
    $(this).parent().find('button.remove').show();
    $(this).hide();

    var element = findLastInput(this).clone();
    var name = element.prop('name');
    var pattern = new RegExp(/\[(.*?)\]/);
    var info = name.match(pattern)[1];
    element.prop({
      'value': '',
      'name' : name.replace(pattern, '[' + info + 'info' + ']'),
      'id'   : element.prop('id') + 'info',
      'type' : 'input'
    });    
    $(this).closest('.button-row').append(element);
})
$('button.remove').click ( function(e) {
    $(this).parent().find('button.add').show();
    $(this).hide();
    findLastInput(this).remove('input');
});

It is this selector that is wrong: findLastInput(this).remove('input');

HTML:

<div class="input string optional"><label for="virksomhed_navn" class="string optional"> Navn</label><input type="text" size="50" name="virksomhed[navn]" maxlength="255" id="virksomhed_navn" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;">Remove</button>
    </div>

    <div class="input string optional"><label for="virksomhed_name" class="string optional">Name</label><input type="text" size="50" name="virksomhed[name]" maxlength="255" id="virksomhed_name" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;">Remove</button>
    </div>


    <div class="input string optional"><label for="virksomhed_pis" class="string optional">Pis</label><input type="text" size="50" name="virksomhed[v]" maxlength="255" id="virksomhed_pis" class="string optional"></div>
<div class="button-row" style="font-size: 11px; width: 110px; float: right; margin-top: -10px; margin-right: 16px;">
      <button class="add" style="font-size: 11px;">Add info</button>
      <button class="remove" style="font-size: 11px;">Remove</button>
    </div>

Upvotes: 0

Views: 276

Answers (3)

Deets McGeets
Deets McGeets

Reputation: 6397

Instead of:

findLastInput(this).remove('input');

you need:

$(this).siblings('input').remove();

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

Here you go

Working demo

Repleace $(this).closest('.button-row').append(element); in your code by $(this).parent().append(element); and findLastInput(this).remove('input'); by $(this).parent().find("input").remove();.

Upvotes: 0

Sheepy
Sheepy

Reputation: 18026

This line, $(this).closest('.button-row').append(element);, adds the new input field to div.button-row instead of div.input. So when you delete the last input in div.input, the first and only input field get deleted, leaving the new one in div.button-row.

EDIT: Just noticed that you say you want the input in another comment. In that case you need to update the part that removes the input.

To select an input field, use the focus method. Keep in mind that the field must be in the document, visible, and enabled (i.e. that it can be selected)

So you only need to change the last line of each function:

$('button.add').click ( function(e) {
    $(this).parent().find('button.remove').show();
    $(this).hide();

    var element = findLastInput(this).clone();
    var name = element.prop('name');
    var pattern = new RegExp(/\[(.*?)\]/);
    var info = name.match(pattern)[1];
    element.prop({
      'value': '',
      'name' : name.replace(pattern, '[' + info + 'info' + ']'),
      'id'   : element.prop('id') + 'info',
      'type' : 'input'
    });
    $(this).closest('.button-row').append(element);
    element.focus();
})


$('button.remove').click ( function(e) {
    $(this).parent().find('button.add').show();
    $(this).hide();
    $(this).closest('.button-row').find('input').remove();
});

Upvotes: 2

Related Questions