javascript - 如何使用 jQuery 消除旧内容而不使用 Empty() 函数？

Question

我正在尝试做一个填字游戏项目，我快要完成了..但是我遇到了一个问题..

在我的 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() 函数

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.. */
    });
};

Answer 1

可以使用.empty()，也可以使用.html()，但关键是在需要清除的HTML元素上调用这些方法出去。如果您在 DOM 结构中太高的元素上调用它，您将删除太多内容。找到与您需要删除的内容最接近的包装元素，并在该元素上使用empty()或html()。

看起来 $div 是容器对象，因此对其调用 empty() 或 html() 。

在 init 调用之前执行此操作，而不是在之后，因为在之后调用它会清除 init 刚刚创建的任何内容。