使用按鈕清除/重置 div 的內容

Question

我正在開發一個涉及拖放的簡單游戲（類似於 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>

Answer 1

變成：

<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>

Answer 2

您只能使用 vanilla 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>

使用按鈕清除/重置 div 的內容

問題描述

2 個解決方案

解決方案1
0 2021-11-27 20:44:35

解決方案2
0 2021-11-27 22:19:52

使用按鈕清除/重置 div 的內容

問題描述

2 個解決方案

解決方案1 0 2021-11-27 20:44:35

解決方案2 0 2021-11-27 22:19:52

解決方案1
0 2021-11-27 20:44:35

解決方案2
0 2021-11-27 22:19:52