Question

See my example below. I’m trying to enter Mike into the input and then hit “remove input” to remove the input from the page. It doesn’t seem like the value is updated in the DOM when a user types a value. How can I get around this?

Example: http://jsfiddle.net/ZMSaD/

Answer 1

The value is updated in the DOM and you can check this with alert($('#testing').val()); (#testing being the input you wish to remove.)

However $("input[value='Mike']").remove(); seems to check the value of the HTML attribute as written in the source HTML. Bizarrely, the HTML attribute is not updated in this context.

Try this counter intuitive example. Set value="foo" on your #testing input and type “Mike” into the control at runtime, then:

alert($('#testing').attr('value'));    // Mike
alert($('input[value="foo"]').val());  // Mike

However, you can force it to update by explicitly assigning to the attribute on change:

$('input').bind('change',function() {
    $(this).attr('value',this.value)
});

Then your original code will work.