使用按钮清除/重置 div 的内容答案

【问题标题】：Clear/reset the content of a div using a button使用按钮清除/重置 div 的内容
【发布时间】：2022-01-05 08:14:53
【问题描述】：

我正在开发一个涉及拖放的简单游戏（类似于 Blockly 和 Scratch）。将按钮拖到目标容器后，我希望能够通过按重置按钮来清除该容器的内容。我已经尝试实现它（在下面的代码中进行了演示）但无济于事。

以下是相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Play Maze - Zoom Zoom</title>
    <script src="{{ url_for('static',filename='vendor/jquery/jquery.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/sb-admin-2.min.js') }}"></script>
</head>

<body id="page-top">
    <div id="wrapper">
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordion_sidebar">
        <!-- Commands -->
            <a class="sidebar-brand d-flex align-items-center justify-content-center">
                <div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
                <div class="sidebar-brand-text mx-3">Commands</div>
            </a>
            <div class="commands">
                <div class="draggable">
                    <input type="button" class="btn-forward" id="forward" value="Forward" draggable="true"></button>
                </div>
                <div class="draggable">
                    <input type="button" class="btn-backward" id="backward" value="Backward" draggable="true"></button>
                </div>
                <div class="draggable">
                    <input type="button" class="btn-right" id="right" value="Right" draggable="true"></button>
                </div>
                <div class="draggable">
                    <input type="button" class="btn-left" id="left" value="Left" draggable="true"></button>
                </div>
                <div class="draggable">
                    <input type="button" class="btn-repeat" id="repeat" value="Repeat" draggable="true"></button>
                </div>
            </div>
        </ul>
                <!-- Begin Page Content -->
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12">
                            <div class="card shadow mb-4">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col">
                                            <div class="container" id="commands"></div>
                                            <button id="reset" class="btn btn-lg btn-primary" value="Reset"></button>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" \
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" \
    crossorigin="anonymous" referrerpolicy="no-referrer">
</script>

<script type="text/javascript">
    $(document).ready(function()
    {
        $("button").click(function()
        {
            $("#commands").empty();
        });
    });
</script>
</html>

【问题讨论】：

$("reset") 正在寻找标签 <reset></reset>。你想要一个 id 选择器 ....$("#reset")。投票结束是一个错字

标签： javascript html jquery css

【解决方案1】：

您只能使用原生 javascript 使 div 出现或消失。下面是一个简单的例子：

<div id="container">This is Div's content</div>
<reset id="resetButton" value="Reset">Reset</reset>

<script>
    resetButton.addEventListener('click', () => {
        container.innerHTML = '';
        // Or container.style.display = 'none'; if you want container to disappear without leaving space
        // Or container.style.visibility = 'hidden'; if you want container to disappear leaving space
    });
</script>

【讨论】：

【解决方案2】：

改为：

<reset id="reset" class="btn btn-lg btn-primary" value="Reset">Reset</reset>

<script type="text/javascript">
    $(document).ready(function()
    {
        $("reset").click(function()
        {
            $("#commands").empty();
        });
    });
</script>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。