htmlを動的に追加された要素でも関数が効くようにする方法・jqueryとvanilla js

jqueryなら

    $(document).on('click', '.js-delete', function() {
        // クリックされたボタンの最も近い親の<table>を削除
        $(this).closest('table').remove();
    });

vanilla jsなら

DOMNodeInsertedは非推奨とのご指摘をいただいたので再度

短い！ありがとうございます。

document.addEventListener('click', ({ target }) => {
  if (target.closest('.js-delete')) {
    target.closest('table').remove();
  }
});

observerを使う方法

// ページ読み込み時に実行される関数
document.addEventListener('DOMContentLoaded', function() {
  // クリック時のイベントリスナーを設定
  addDeleteEventListener(document);
});

// 新しい要素が追加されたときに実行される関数
function handleNewElement(mutationsList) {
  mutationsList.forEach(function(mutation) {
    if (mutation.type === 'childList') {
      // 追加された要素にイベントリスナーを設定
      mutation.addedNodes.forEach(function(node) {
        if (node.nodeType === Node.ELEMENT_NODE) {
          addDeleteEventListener(node);
        }
      });
    }
  });
}

// Mutation Observer を作成してイベントリスナーを設定
const observer = new MutationObserver(handleNewElement);
const observerConfig = {
  childList: true, // 子ノードの変更を監視
  subtree: true // 子孫ノードも監視
};

// イベントリスナーを追加する関数
function addDeleteEventListener(target) {
  const deleteButtons = target.querySelectorAll('.js-delete');
  deleteButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      const table = button.closest('table');
      if (table) {
        table.remove();
      }
    });
  });
}

// ルート要素を監視対象に設定
observer.observe(document.documentElement, observerConfig);

以下は非推奨だけど念の為

// ページ読み込み時に実行される関数
document.addEventListener('DOMContentLoaded', handleDeleteButtons);

// 新しい要素が追加されたときに実行される関数
document.addEventListener('DOMNodeInserted', handleDeleteButtons);

// 削除ボタンのイベントリスナーを設定する関数
function handleDeleteButtons(event) {
  const target = event.target;
  if (target.matches('.js-delete') || target.closest('.js-delete')) {
    target.closest('.js-delete').addEventListener('click', function() {
      this.closest('table').remove();
    });
  }
}

動的に追加された場合の処理を考えるとjqueryのコードの短さは神。