JSFiddle - React, Tailwind, and code Playground

by yshrkn

HTML

<button id="deleteTarget">Delete All</button>

<div class="target">target</div>
<div class="target">target</div>
<div class="target">target</div>

JavaScript

const targets = document.getElementsByClassName('target');
const wm = new WeakMap();

// Weak Mapをセット
function setWeakMap() {
  for (let i = 0, len = targets.length; i < len; i++) {
    wm.set(targets[i], `data${i}`);
  }
}

function addEventListeners() {
  document.getElementById('deleteTarget').addEventListener('click', () => {
    // 全要素削除
    while (targets.length) {
      targets.item(0).remove()
    }
    
    console.log(wm);
  });
}

function dumpWeakMap(interval) {
  setInterval(() => {
    console.log(wm);
  }, interval);
}


function init() {
  setWeakMap();
  dumpWeakMap(1000);
  addEventListeners();
}

init();