0
$('.remove-member').click(function () {
    var toRemove = $(this).parent().text().slice(0, -1);
    var members = $(this).parent().siblings('input[name=group-members]').val().split(' ');
    $(this).parent().remove();
    removeElement(members, toRemove);
    members = members.join(' ');
    $(this).parent().siblings('input[name=group-members]').val(members);
});

In the above, everything works until the last line (setting the value to the string contained in members). Displaying the variable members in the console displays the expected string, signifying that $(this).parent().siblings('input[name=group-members]') is traversing the DOM correctly. My HTML is below:

<form method='POST' action='action.php'>
    <input type='text' value='[ GROUP NAME GOES HERE ]' name='group_name' />
    <input type='text' name='add-member' />
    <div class='group_member'>name01<span class='remove-member'>x</span>
    </div>
    <div class='group_member'>name02<span class='remove-member'>x</span>
    </div>
    <div class='group_member'>name03<span class='remove-member'>x</span>
    </div>
    <div class='group_member'>name04<span class='remove-member'>x</span>
    </div>
    <input type='text' value='name01 name02 name03 name04' name='group-members' />
    <input type='Submit' value='Update' />
</form>

Directly referencing $('input[name=group-members]') is not an option due to the nature of the page.

removeElement function:

function removeElement(arr) {
    var what, a = arguments,
        L = a.length,
        ax;
    while (L > 1 && arr.length) {
        what = a[--L];
        while ((ax = arr.indexOf(what)) !== -1) {
            arr.splice(ax, 1);
        }
    }
    return arr;
}
Firedrake969
  • 763
  • 8
  • 22
  • 1
    Have you tried outputting `$(this).parent().siblings('input[name=group-members]')` to the console to make sure jQuery is finding the elements you expect? – Surreal Dreams Mar 03 '15 at 21:03
  • Yes, the expected element is being found. – Firedrake969 Mar 03 '15 at 21:05
  • Have a look at [this question of mine](http://stackoverflow.com/questions/10654595/jquery-setting-hidden-input-value-not-working-as-expected-in-ie7-and-ie8) - it may be relevant. – Aleks G Mar 03 '15 at 21:05
  • 1
    @Firedrake969 can you share also `removeElement` function? – albciff Mar 03 '15 at 21:08
  • @Firedrake969 - that's a good start. Did you also verify that `members` contains the expected value? I find that when something basic like setting a form value isn't cooperating, you have to test your assumptions. For instance, am I trying to change the right thing, and am I using the value I expect to be using? – Surreal Dreams Mar 03 '15 at 21:09
  • I am certain that members contains the expected string, as I log it to the console immediately before setting the new value. @albciff - I've shared the removeElement function, if it's needed – Firedrake969 Mar 03 '15 at 21:10

1 Answers1

2
$('.remove-member').click(function () {
    var toRemove = $(this).parent().text().slice(0, -1);
    var members = $(this).parent().siblings('input[name=group-members]').val().split(' ');
    $(this).parent().remove();
    removeElement(members, toRemove);
    members = members.join(' ');
    $(this).parent().siblings('input[name=group-members]').val(members);
});

You are removing the parent..

$(this).parent().remove();

So the call..

$(this).parent().siblings('input[name=group-members]').val(members);

Shouldn't work anymore because you just killed the containing DOM node.

eyegropram
  • 672
  • 4
  • 11