HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>refresh list</title>

  <style>

    body { font-family: sans-serif; padding: 16px; max-width: 480px; }

    ul { padding-left: 20px; min-height: 60px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 12px 12px 12px 32px; }

    li { padding: 4px 0; }

    button { margin-right: 8px; margin-top: 12px; padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }

    #set-a { background: #6366f1; }

    #set-b { background: #059669; }

  </style>

</head>

<body>

  <ul id="item-list">

    <li>Initial row (will be replaced)</li>

  </ul>

  <button type="button" id="set-a">Render set A</button>

  <button type="button" id="set-b">Render set B</button>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    function renderItems(items) {

      var $list = $("#item-list").empty();

      items.forEach(function(item) {

        $list.append($("<li>").text(item.name).data("id", item.id));

      });

    }



    $("#set-a").on("click", function() {

      renderItems([

        { id: 1, name: "Alpha" },

        { id: 2, name: "Beta" }

      ]);

    });



    $("#set-b").on("click", function() {

      renderItems([

        { id: 10, name: "Gamma" },

        { id: 11, name: "Delta" },

        { id: 12, name: "Epsilon" }

      ]);

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .empty() — refresh list from data (Try It)