If input is set to 0 how can it be removed from the DOM?

Question

I'm pretty new at jQuery. I'm trying to remove divs from the DOM if the value of an input is set to 0. All of the divs have a class called "item", as if they were items in a shopping cart.

Is there a way to remove each div when is set to 0 without a delete button?

<div class="item">
  <label for="inputQuantity">Quantity</label>
  <input type="text" id="inputQuantity" placeholder="1">
</div>

<div class="item">
  <label for="inputQuantity">Quantity</label>
  <input type="text" id="inputQuantity" placeholder="1">
</div> 

http://jsfiddle.net/A9cm7/

Answer 1

You have repeating ID's, get rid of those for a common class:

<div class="item">
  <label>Quantity</label>
  <input type="text" class="inputQuantity" placeholder="1">
</div>

Then do:

$(".item .inputQuantity").blur(function() {
    if (this.value == 0) {
        //remove it
        $(this).closest(".item").remove();
    }
})

This will set a blur handler on your inputs, and if the value is 0 on blur, then it'll remove the div.