Expresso Store: remove item in cart with 'x' button

Question

How would I go about removing an item in the cart through the use of a little x button? This would not be in a exp:store:checkout tag.

Rather, the cart would display along side the store itself with a current listing of all items. It would have a 'checkout' button, which then leads to a check out page, but also a little 'x' on the far right of each entry in the cart to allow the user to remove an item with a single click.

Is this feasible in Expresso Store?

Here is the code of my _cart include.

        <div class="cart">
          <div class="cartheader">
            <div class="carticon">
              <img src="{images}/cartIcon.jpg" alt="539b2a50de9f60d2677627c3_cartIcon.jpg">
            </div>
            <p class="carttext">Cart</p>
          </div>
          <div class="cartitemdiv">
          {exp:store:cart}
            {if no_items}                  
            <div class="w-clearfix cartentry">
             <p>Your cart is empty!</p>
            </div>
            {/if}

            {items}
            {exp:channel:entries channel="store" entry_id="{entry_id}" limit="1" status="open|outlet center"}
            <div class="w-clearfix cartentry">                  
              <img class="cartitemimage" src="{product_image_thumbnail}" alt="{title}">
              <div class="cartitemtext">{!-- {exp:gwcode_categories entry_id="{entry_id}" excl_cat_id="27|2|38|40|43|37|28|30|29|31|36|34|32|35|33|3" style="linear"}{cat_name}{/exp:gwcode_categories} – --} {product_color}</div>
              <a class="w-inline-block cartitemdelete" href="#">
                <img src="{images}/delete.png" alt="539f0abea2b67b211347a277_delete.png">
              </a>
            </div>
            {/exp:channel:entries}
            {/items}

            <div class="w-clearfix checkoutdiv">
              <div class="checkoutbuttondiv"><a class="button btn btn-success pull-right" href="/checkout/">checkout</a>
              </div>
            </div>
            {/exp:store:cart}
          </div>

Answer 1

You would need to use the {exp:store:checkout} tag pair even if it is not part of your actual checkout process as the {exp:store:cart} tag doe not create a form. Once you switch your tags you will need to use the remove_items syntax (docs link).

Something along the lines of:

{items}
  {title} - <input type="checkbox" name="remove_items[{key}]" value="1" />
{/items}

or

{items}
  {title} -  <input type="submit" name="remove_items[{key}]" value="X" />
{/items}