Atualização da quantidade pelo Ajax

Fiz tudo de acordo com o vídeo mas a minha função "atualiza" do Javascript não atualiza a página com a quantidade de produtos. Somente se eu recarregar a pagina a quantidade é atualizada.

Código da view:

@model IList<CaelumEstoque.Models.Produto>

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Nome</th>
                    <th>Quantidade</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var produto in Model) { 
                    <tr>
                        <td>@produto.Id</td>
                        <td>@Html.RouteLink(produto.Nome, "VisualizaProduto", new { id = produto.Id })</td>
                        <td id="qde@(produto.Id)">
                            @produto.Quantidade</td>
                        <td><a href="#" onclick="decrementa(@produto.Id)">Decrementar</a></td>
                    </tr>
                }
            </tbody>
        </table> 

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>

<script type="text/javascript">
    function decrementa(produtoId) {
        var url = "@Url.Action("DecrementaQtd", "Produto")";
        $.post(url, { id: produtoId }, atualiza);
    }

    function atualiza(resposta) {
        var elemento = $("#qde" + resposta.id);
        elemento.html(resposta.Quantidade);
    }
</script>

Código do método do produto controller:

        public ActionResult DecrementaQtd(int id)
        {
            ProdutosDAO dao = new ProdutosDAO();
            Produto produto = dao.BuscaPorId(id);
            produto.Quantidade--;
            dao.Atualiza(produto);
            return Json(produto);
        }