如何在不使用 Empty(） 函数的情况下使用 jQuery 消除旧内容

我正在尝试做一个填字游戏项目，我快到了。但我面临一个问题..

在我的 HTML 代码中，我有一个用于加载 .使用 Javascript 的 JSON 文件。

        <form method="post" id="formulaire">
        <div class="toto">
            <select id="myselect" name="grille">
                <option selected="selected">Choisir</option>
                <option value="test1.json">test1</option>
                <option value="test2.json">test2</option>
            </select>
</form>

在我的脚本文件中，我已经声明了函数，最后我使用

(function ($) {
    $(document).ready(function () {
        $('#myselect').on('change', function (e) {
            init($('#myselect').val()); /* This is a declared function already to draw the grid and the other things I wanna do and it works well.*/
        });
     });
}) (jQuery);

所以现在当我从列表中选择例如test1时，网格加载得很好，一切都很好。但是当我选择test2时，页面会损坏，我得到 2 个网格彼此内部，一切都变得更糟。

我想找到一种方法来正确地做我想做的事情，没有任何问题。这意味着当我重新选择另一个网格时，它会出现，而旧的网格不再存在。

我尝试在init(..)调用后使用empty()函数，但它清除了所有页面，并且无论第一个选择第二个，页面上都没有任何东西。

有什么想法吗？

**init（） fonction

function init(link) {
    $.getJSON(link, function (data) {
        //set up the crossword
        var puzzle = data.solution;
        var cheat = 0;
        $div = $('#container');
        $("#author").append('<b>' + data.author + '</b>');
        var start = Date.now();// for calculating the time purpose
       // Creating the list of clues
        for (i = 0; i < data.acrossClues.length; i++) {
            if (data.acrossClues[i] != null) {
                $(".listhorizontal").append('<li id="selects">' + data.acrossClues[i] + '</li>');
            }
        }
        for (i = 0; i < data.downClues.length; i++) {
            if (data.downClues[i] != null) {
                $(".listvertical").append('<li id="selects">' + data.downClues[i] + '</li>');
            }
        }
        // creating the grid 
        for (var i = 0; i < data.nRows; i++) {
            for (var j = 0; j < data.nCols; j++) {
                var $block = $('<div class="block" data="false" select="false" wordselect="false" cheat="false"><div class="outer"><div class="inner"></div></div></div>');
                if (j == 0) $block.css('clear', 'both');
                $div.append($block);
            }
        }

        for (var row = 0; row < puzzle.length; row++) {
            for (var col = 0; col < puzzle[row].length; col++) {
                if (puzzle[row][col] != ".") {
                    addLetter(puzzle[row].charAt(col), row + 1, col + 1, 0);
                }
            }
        }
./* + many functions for event handling.. */
    });
};