图书库项目添加书籍后Dialog无法弹出的问题求助

Uncaught InvalidStateError: Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document. at HTMLButtonElement.

问题根源 #

你在display函数中使用container.textContent = '';消除重复条目，但这行代码会彻底清空container容器下的所有子元素——如果你的dialog元素是container的子节点，执行这行代码后，dialog会被从DOM树中移除。再次点击添加按钮调用dialog.showModal()时，因元素已不在文档中，就会抛出上述错误。

解决方案 #

方案1：调整DOM结构（推荐）

将dialog元素移出container容器，作为body的直接子节点，这样清空container内容时不会影响到dialog：

<!-- 书籍展示容器 -->
<div class="container"></div>

<!-- 添加书籍的弹窗，放在container外部 -->
<dialog id='dialog'>
  <form>
    <fieldset>
      <label for="title">Title</label>
      <input type="text" id="title" name="title">
      <label for="author">Author</label>
      <input type="text" id="author" name="author">
      <label for="pages">Pages</label>
      <input type="number" id="pages" name="pages">
    </fieldset>

    <fieldset>
      <legend>Have you read it?</legend>
      <div class='yes'>
        <input type="radio" id="read" name="read" value="read">
        <label for="read">Yes</label>
      </div>
      <div class='no'>
        <input type="radio" id="not_read" name="read" value="not_read">
        <label for="not_read">No</label>
      </div>
    </fieldset>
    <div class='btn_submit'>
      <button id='submit' type="submit">Submit</button>
    </div>
  </form>
</dialog>

方案2：修改display函数的清空逻辑

如果不想改动DOM结构，可以只删除container下的书籍元素（.book类），而非清空所有内容：

function display() {
  // 仅移除所有书籍卡片，保留dialog等其他子元素
  container.querySelectorAll('.book').forEach(book => book.remove());

  myLibrary.forEach(lib => {
    const book = document.createElement('div');
    book.classList.add('book');
    const newP = document.createElement('p');

    book.appendChild(newP);
    container.appendChild(book);

    newP.textContent = lib.info();
  })
}

说明 #

两种方案都能解决问题，方案1的DOM结构更清晰，可避免后续其他元素受到误删除的影响；方案2适合需要保持现有DOM结构的场景。

内容的提问来源于stack exchange，提问作者Potatostudies