Question

Assume I have an HTML document containing:

<form id = "my_form">
    <input type = "text" />
    <input type = "text" />
    <input type = "text" />
    <button type = "button" onclick = "removeGoodInputs()">Do the job</button>
</form>

I want to get rid of the inputs values which satisfy some condition (given in my JS). I have tried creating my removeGoodInputs() function (as below), but this removes all inputs from the form. How can I resolve this issue?

function removeGoodInputs() {
    $("#my_form input").each(function() {
        if(this.attr("value") == 10)
            $(this).remove();
    });
}

Answer 1

.attr() is a jQuery method so it can only be called on a jQuery object. Further, in jQuery .val() is the easier way to get the value (a shortcut).

So, this line of your code is not correct:

if(this.attr("value") == 10)

I would recommend either:

if (this.value == "10")      // plain javascript

or:

if ($(this).val() == "10")   // jQuery

Note, I also changed the comparisons to be strings since that is what .value returns and it’s better to not rely on an automatic type conversion.

You can see it work here: http://jsfiddle.net/jfriend00/HMemp/