Specifieke waarde uit multidimensionele array verwijderen

Ik heb een winkelmandje met een een kruisje om een product te verwijderen, dit werkt alleen nog niet. Hoe kan ik dit voor elkaar krijgen?

Mijn cart.php pagina (hier wordt naar gepost via een ajax script):

<?PHP
if(isset($_POST['product'])){
  $thisProduct = array(
    'product' => $_POST['product'],
    'price' => $_POST['price'],
    'picture' => $_POST['picture'],
    'quantity' => $_POST['quantity'],
  );
  if (isset($_SESSION['cart'])) {
    $_SESSION['cart'][] = $thisProduct;
  } else {
    //Session is not set, setting session now
    $_SESSION['cart'] = array();
    $_SESSION['cart'][] = $thisProduct;
  }
}
$numberofproducts = count($_SESSION['cart']);

?>
<!-- Shop Cart -->
<ul class="topnav navLeft topnav--cart">
  <li class="drop">
    <a href="#" class="kl-cart-button" title="View your shopping cart">
      <p><i class="glyphicon glyphicon-shopping-cart icon-white flipX-icon xs-icon" data-count="<? echo $numberofproducts; ?>"></i>Winkelwagen</p>
      <span class="hidden-xs hidden-sm hidden-md hidden-lg">Mijn winkelwagen</span>
    </a>
    <div class="pPanel">
      <div class="inner cart-container">
        <div class="widget_shopping_cart_content">
          <ul class="cart_list product_list_widget ">
          <?php
          foreach($_SESSION['cart'] as $cartproduct){
            $productlist .= '
            <li>
              <a href="#" class="remove" title="Remove this item">×</a>
              <a href="#" class="product-title">
                <img src="'.$cartproduct['picture'].'" alt="'.$cartproduct['product'].'" title="'.$cartproduct['product'].'" />'.$cartproduct['product'].'
              </a>
              <span class="quantity">'.$cartproduct['quantity'].' × <span class="amount">'.$cartproduct['price'].'</span></span>
            </li>';
          }
          echo $productlist;
          // echo '<pre>';
          // print_r($_SESSION['cart']);
          // echo '</pre>';
          ?>
          </ul>
          <!-- end product list -->
          <p class="total">
            <strong>Subtotal:</strong><span class="amount">$99.90</span>
          </p>
          <p class="buttons">
            <a href="cart.html" class="button wc-forward">View Cart</a>
            <a href="checkout.html" class="button checkout wc-forward">Checkout</a>
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

Mijn array ziet er zo uit:

Array
(
    [0] => Array
        (
            [product] => Douche 1
            [price] => 1200
            [picture] => cms/images/douche.jpg
            [quantity] => 
        )

    [1] => Array
        (
            [product] => Douche 1
            [price] => 1200
            [picture] => cms/images/douche.jpg
            [quantity] =>  => 18
        )
)

Hij moet dus on click de juiste key verwijderen, 0 of 1 met alle data die daarin zit.

Wat is de beste manier om dit aan te pakken?

Via ajax moet dit gebeuren, ik zal voor het gemak mijn ajax er nog even bij zetten:

// Attach a submit handler to the form
tpj( ".cart" ).submit(function( event ) {
  // Stop form from submitting normally
  event.preventDefault();
  // Get some values from elements on the page:
  var $form = tpj( this ),
    $product = $form.find( "input[name='product']" ).val(),
    $price = $form.find( "input[name='price']" ).val(),
    $picture = $form.find( "input[name='picture']" ).val(),
    $quantity = $form.find( "input[name='quantity']" ).val(),
    url = $form.attr( "action" );
  // Send the data using post
  var posting = tpj.post( url, { product: $product, price: $price, picture: $picture, quantity: $quantity} );
  // Put the results in a div
  posting.done(function( data ) {
    var content = tpj( data );
    tpj( "#result" ).empty().append( content );
  });
});