Clear html content with jquery not working

Question

I have this jquery

<script type="text/javascript">
    $(document).ready(function () {
        $("#GrupoDescontos").change(function () {
            $.ajax
            ({
                url: '' + $(this).val(),
                type: 'GET',
                success: function (dados) {
                    $("#GridPartial").html("");
                    $("#GridPartial").html(dados);
                    var resultado = dados;
                },
                error: function (erro) {

                }
            });
        });
    });

When I first enter the screen, the Detail screen is loaded. after selecting the Dropdown the grid is reloaded, but the problem is the screen that enters for the first time, without the change of the Dropdown, is not cleared by the command of jquery $("#GridPartial").html("");, getting two grids chained and is loaded duplicate information from the first screen that does not exist in the partial view, as title, for example. How I clean it up?

EDIT1

See how the screen is all scrambled with two grids

EDIT2

View

@model Site.Areas.API.Models.AzureDiscountGroups.AzureDiscountGroupModel
@using SubscriptionCenter.API.Models.Resellers


<style>
    .Makewide {
        width: 200px;
    }
</style>

<div>
    <h4></h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Id)

    <div class="form-group">
        @Html.Label("Grupo de Desconto", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("GrupoDescontos", new SelectList(ViewBag.Desconto, "Id", "Descricao"), new { @id = "GrupoDescontos", @class = "Makewide" })
            @*@Html.ValidationMessageFor(model => model.HomeTemplateId, "", new { @class = "text-danger" })*@
        </div>
    </div>

</div>

<div id="GridPartial"></div>

@Html.Partial("DetailsPartial")

<p>
    @Html.ActionLink("Back to List", "Index")
</p>

<script type="text/javascript">
    $(document).ready(function () {
        $("#GrupoDescontos").change(function () {
            var $div = $('#GridPartial');
            $.ajax
            ({
                url: '' + $(this).val(),
                type: 'GET',
                    success: function (dados) {
                        $div.html('');
                        $div.html(dados);
                },
                    error: function (erro) {
                }
            });
        });
    });

    $(document).ready(function () {
        $("#GrupoDescontos").val("@ViewBag.Indice");
    });
</script>

and the Partialview

<table class="table">
    <tr>
        <th>
            Nome
        </th>
        <th>
            Alias
        </th>
        <th>
            WhiteLabel?
        </th>
        <th>
            MPN Id
        </th>
        <th>
            Criada em
        </th>
    </tr>

    @foreach (var item in ViewBag.DetailReseller as List<ResellerListModel>)
    {
        <tr align="center">
            <td>
                @(item.Name)
            </td>
            <td>
                @(item.Alias)
            </td>
            <td>
                @(item.WhiteLabel ? "Sim" : "Não")
            </td>
            <td>
                @(item.MpnId)
            </td>
            <td>
                @(item.CreatedOn)
            </td>
        </tr>
    }
</table>

Answer 1

The problem is that your div is empty, the content you want to replace is out of it, so the content is duplicated when it comes from partialView. For the content of partial to be replaced do as an example below, placing all content of partial into the div updated on ajax:

<div id="GridPartial">
    @Html.Partial("DetailsPartial")
</div>

In the ajax, gets like this:

$(document).ready(function () {
    $('#GrupoDescontos').change(function () {
        var $div = $('#GridPartial');
        $.ajax
        ({
            url: '' + $(this).val(),
            type: 'GET',
            success: function (dados) {
                $div.html(dados);
            },
            error: function (erro) {
                alert('Ops...');
            }
        });
    });
});

Answer 2

Hello, good night!

The command to clear is:

$("#GridPartial").empty();
$("#GridPartial").html("seu conteúdo");