Clear/reset the content of a div using a button-CodePudding

I am developing a simple game (similar to Blockly and Scratch) that involves drag-and-drop. After dragging the buttons to a target container, I want to be able to clear the content of that container by pressing a Reset button. I have tried to implement it (which is demonstrated in the code below) but to no avail.

Here are the relevant codes:

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

CodePudding user response：

You can make divs' appear or disappear using vanilla javascript only. A simple example below:

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

CodePudding user response：

Changed to:

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