Why does removing almost all objects from dom not result in lower memory?

When I open Chrome developer tools, open this web page, and take a snapshot, the size is 2.1MB.

When I click on one of the buttons, all of them and their div are removed. If I then take another snapshot, the size is 1.6MB.

So is it the case that when using Chrome developer tools and taking snapshots, there will always be some memory consumed by the web page, that you need to account for when taking snapshots and looking for memory leaks?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript">
        var onLoadFunc = function() {
            for(var x=0;x<30000;x++) {
                var button = document.createElement("input");
                button.type = "button";
                button.value = "Destroy Content";
                button.onclick = destroyFunc;
                document.getElementById('mainDiv').appendChild(button);
            }
        };

        var destroyFunc = function() {
            var el = document.getElementById( 'mainDiv' );
            el.parentNode.removeChild(el);
        };
    </script>
</head>
<body onLoad="onLoadFunc()">
  <div id="mainDiv"/>
</body>
</html>