如何通过jquery删除按钮并将其替换为<a>标签

这是我的 JQuery 代码

<script>
$(".simpleCart_shelfItem button").click(function()
    {
        $(this).prop('disabled', true);
        $(this).addClass('disabled');
        $(this).html("Adding &nbsp;&nbsp;<i class='icon-spinner9 spin'></i>");

        var action = "add";
        var queryString = "action="+action+"&pid="+this.value;
        var $this = $(this);

        $.ajax({
                url: "add_cart",
                data: queryString,
                type: "POST",
                success:function(data)
                    {
                        $this.remove();
                        $($this).before("<a href='cart' class='btn view-more'>In Your Cart (View)</a>");
                    },
                error:function(){}
            });
    });
</script>

这是我的 HTML 代码：

<div class="simpleCart_shelfItem">
    <p><span>&#8377; price</span> <i class="item_price">&#8377; selling price</i></p>
    <button value="some value" class="btn view-more">Add To Cart</button>
    <a href="product?id=id>
        <button class="hashs-cart">Buy Now</button>
    </a>
</div>

我想要实现的是，一旦用户点击添加到购物车，按钮就应该被删除并替换为这个 => <a href="cart" class="btn view-more">In Your Cart (View)</a>

通过使用上面的 JQuery 代码，我可以删除按钮但不能用<a>标签替换它。

任何人都可以帮助解决这个问题，为什么会这样？