Jquery Question posted in
The official Jquery Api Documentation can be found here.

Remove Dynamically Added Table Using jQuery

How to remove the entire table that was dynamically added to the page using jQuery? A table will be created and data will be added when users click a start button. The table and data should be removed and replaced with new data when the same button is clicked again.

Firstly, using remove() is not removing the entire table.
Secondly, when the button is clicked again, a new table with data is appended(added). So two tables are side by side on the web page.


async function fillTable() {
  // create thead, tbody, and tds
  // fill the thead and tbody
}

async function setupAndStart() {
  // UNIMPLEMENTED
  $("#jeopardy").remove();

  showLoadingView();

  // make HTML table
  const $gameBoard = $("<table></table>");
  $gameBoard
    .attr("id", "jeopardy")
    .append($("<thead></thead>"))
    .append($("<tbody></tbody>"));

  $(".spinner").after($gameBoard);

  await fillTable();

  hideLoadingView();

}

$("#start-btn").on("click", setupAndStart);

I tried to remove() the table, and empty the thead, tbody, tr. But it did not work and same problem exist.

Thank you in advance for any input.

Tags:

2

Answers


  1. 0

    I recommend replacing the HTML element. Removing the element with the id "#jeopardy" can bring some delays.

     async function fillTable() {
  // create thead, tbody, and tds
  // fill the thead and tbody
}

async function setupAndStart() {

  showLoadingView();

  // make HTML table
  const $gameBoard = $("<table></table>");
  $gameBoard
    .attr("id", "jeopardy")
    .append($("<thead></thead>"))
    .append($("<tbody></tbody>"));

  // Replace the element
  $("#jeopardy").replaceWith($gameBoard);

  $(".spinner").after($gameBoard);

  await fillTable();

  hideLoadingView();

}

$("#start-btn").on("click", setupAndStart);
    Login or Signup to reply.
  2. 0 
            async function getData() {
            var rows = [
                { category: "Category 1", value: "$100" },
                { category: "Category 2", value: "$200" },
                { category: "Category 3", value: "$300" },
                { category: "Category 4", value: "$400" },
            ];
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(rows);
                }, 2000); // 2000 milliseconds delay
            });
        }

        async function fillTable() {
            const rows = await getData();

            const $tbodyHead = $("<tr></tr>");

            // Add ID, Category, and Price to table
            const $thId = $("<th></th>").text("ID");
            const $thCategory = $("<th></th>").text("Category");
            const $thPrice = $("<th></th>").text("Price");
            $tbodyHead.append($thId, $thCategory, $thPrice);
            rows.forEach((row, index) => {
                const $tbodyRow = $("<tr></tr>");
                const id = getRandomId();

                // Add ID, Category, and Price to table
                const $tdId = $("<td></td>").text(id);
                const $tdCategory = $("<td></td>").text(row.category);
                const $tdPrice = $("<td></td>").text(row.value);

                $tbodyRow.append($tdId, $tdCategory, $tdPrice);
                $("#jeopardy tbody").append($tbodyRow);
            });
        }

        async function setupAndStart() {
            $("#jeopardy tbody").empty(); // Clear existing table data
            $("#jeopardy thead").empty();
            showLoadingView();

            await fillTable();

            hideLoadingView();
        }

        function showLoadingView() {
            $(".spinner").show();
        }

        function hideLoadingView() {
            $(".spinner").hide();
        }

        $("#start-btn").on("click", setupAndStart);

        // Generate random ID function
        function getRandomId() {
            return Math.floor(Math.random() * 100000);
        }
    .spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #7983ff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 50px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
</head>

<body>
    <div class="spinner" style="display: none;"></div>
    <button id="start-btn">Start Game</button>

    <table id="jeopardy">
        <thead>
            <tr id="header-row">
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search