Create a delete action in your ajax add to cart controller.
Your Controller Action
public function deleteAction()
{
if((int) $this->getRequest()->getParam('isAjax') == 1){
$id = (int) $this->getRequest()->getParam('id');
if ($id) {
try {
$this->_getCart()->removeItem($id)->save();
$message = $this->__('Item was removed from your shopping cart.');
$response['status'] = 'SUCCESS';
$response['message'] = $message;
$this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));
return;
} catch (Exception $e) {
$response['status'] = 'ERROR';
$response['message'] = $this->__('Cannot remove the item from shopping cart.');
Mage::logException($e);
}
}
} else {
return parent::deleteAction();
}
}
Add the JS and button code in the app/design/frontend/[YOUR THEME]/[YOUR THEME]/checkout/cart/item/default.phtml
<script type="text/javascript">
var deleting = 0;
productRemoveFromCart = function(url, elem){
deleting = deleting + 1;
jQuery(elem).parent().parent().animate({ opacity: 0.5 }, 200, function() { });
if (!url) {
//alert('Problem');
}
url = url.replace("checkout/cart","ajax/index");
if(window.location.protocol == "https:") {
url = url.replace("http:","https:");
}
url += '&isAjax=1';
var data = 'isAjax=1';
try {
jQuery.ajax( {
url : url,
dataType : 'json',
type : 'post',
data : data,
success : function(data) {
deleting = deleting - 1;
if(deleting<1){
var pagepath = window.location.pathname;
if((pagepath.indexOf("onestepcheckout")>0)||(pagepath.indexOf("checkout/cart")>0)){
location.reload();
}
}
},
error: function (data) {
deleting = deleting - 1;
}
});
} catch (e) {
}
}
</script>
<td class="a-center"><a href="javascript:void(0)" onclick="productRemoveFromCart('<?php echo $this->getDeleteUrl(); ?>',this);" title="<?php echo $this->__('Remove item')?>" class="btn-remove btn-remove2"><?php echo $this->__('Remove item')?></a></td>
