Bootstrap模态框调用remove()删元素时意外关闭问题求助

我编写了一段代码，用于在Bootstrap模态框中添加和删除具有动态结构的div元素。但奇怪的是，当我使用remove()方法删除div元素时，模态框也会随之关闭，而我并没有编写任何触发模态框关闭的代码，无法定位问题根源。

模态框状态变化 #

• 使用jQuery打开模态框前的初始HTML状态：

<div class="modal fade" id="locigModalStep1"  role="dialog" data-backdrop="static">

• 调用.modal('show')打开模态框后的状态：

<div class="modal fade show" id="locigModalStep1" role="dialog" data-backdrop="static" aria-modal="true" style="display: block;">

• 使用remove()方法删除模态框内div元素后的状态：

<div class="modal fade" id="locigModalStep1"  role="dialog" data-backdrop="static">

值得注意的是，这段代码在Stack Overflow环境下运行完全正常：删除按钮可正常工作，模态框不会关闭。问题只出现在我自己的项目中，肯定是项目中有某些因素导致了这个问题。

相关代码 #

JavaScript代码 #

function deleteLogicTableButtonFunc(event) {
  const tableId = this.id.replace('deleteTable', '');
  const table = document.getElementById(`tableComponentHeader${tableId}`);
  const operatorContainer = document.getElementById(`logicOperatorContainer${tableId}`);

  table.remove();
  operatorContainer.remove();
}

function addChildToLogicTable(componentId){
  const tableChild = document.getElementById("tableContainer");
  if (tableChild != null) {
    $(tableChild).append(getLinesForAddLogicTable(addLogicComponentTableText, componentId));
    $(tableChild).append(addLogicOperatorButton(componentId));

    const deleteTableButton = document.getElementById("deleteTable"+componentId.toString());
    deleteTableButton.addEventListener("click", deleteLogicTableButtonFunc);
  }
}

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(find, 'g'), replace);
}

function getLinesForAddLogicTable(func, compId) {
  var myhtml = func.toString();
  var htmlstart = myhtml.indexOf('/*');
  var htmlend = myhtml.lastIndexOf('*/');

  myhtml = myhtml.substr(htmlstart + 2, htmlend - htmlstart - 2);
  myhtml = replaceAll(myhtml, "{selectedComponent}", compId);

  return myhtml;
}

function addLogicComponentTableText() {/*
 <table class="table table-bordered" style="margin-top: 20px;" id="tableComponentHeader{selectedComponent}">
    <thead>
        <tr>
            <th colspan="4" style="text-align:center;"><button type="button" class="btn btn-danger" id="deleteTable{selectedComponent}">Delete</button></th>
        </tr>
        <tr>
            <th id="columnCompName{selectedComponent}">Component Name</th>
            <th>Grup Adresses</th>
            <th>Operator</th>
            <th>Input Value</th>
        </tr>
    </thead>
     <tbody>
         <tr>
             <td>1. Group Adress: </td>
             <td id="cellGa{selectedComponent}"> --- </td>
             <td>
                 <select class="form-control" id="cellOperatorSelect{selectedComponent}">
                     <option value="equal" selected>==</option>
                     <option value="exclamation">!!</option>
                     <option value="bigger">></option>
                     <option value="smaller"><</option>
                     <option value="biggerAndEqual">>=</option>
                     <option value="smallerAndEqual"><=</option>
                 </select>
             </td>
             <td id="cellInputValue{selectedComponent}">Input</td>
         </tr>
         <tr>
             <td>2. Group Adress: </td>
             <td id="cellSecondGa{selectedComponent}"> --- </td>
             <td>
                 <select class="form-control" id="cellOperatorSelectSecond{selectedComponent}">
                     <option value="equal" selected>==</option>
                     <option value="exclamation">!!</option>
                     <option value="bigger">></option>
                     <option value="smaller"><</option>
                     <option value="biggerAndEqual">>=</option>
                     <option value="smallerAndEqual"><=</option>
                 </select>
             </td>
             <td id="cellInputValueSecond{selectedComponent}">Input</td>
         </tr>
         <tr>
             <td>Feedback Group Adress: </td>
             <td id="cellFa{selectedComponent}"> --- </td>
             <td>
                 <select class="form-control" id="cellOperatorSelectFeedback{selectedComponent}">
                     <option value="equal" selected>==</option>
                     <option value="exclamation">!!</option>
                     <option value="bigger">></option>
                     <option value="smaller"><</option>
                     <option value="biggerAndEqual">>=</option>
                     <option value="smallerAndEqual"><=</option>
                 </select>
             </td>
             <td id="cellInputValueFeedback{selectedComponent}">Input</td>
         </tr>
     </tbody>
 </table>
*/}

function addLogicOperatorButton(componentId) {
    return `
    <div class="logic-operator-container" id="logicOperatorContainer${componentId}">
        <button class="btn logic-operator logic-operator-selected  btn-success" data-operator="AND">AND</button>
        <button class="btn logic-operator" data-operator="OR">OR</button>
    </div>
    `;
}

$("#addInputComponent").click(function () {
  addChildToLogicTable("1");
  document.getElementById("addInputComponent").style.visibility = 'hidden';
});

$("#addKnxComponent").click(function () {
  addChildToLogicTable("2");
  document.getElementById("addKnxComponent").style.visibility = 'hidden';
});

$("#addOutputComponent").click(function () {
  addChildToLogicTable("3");
  document.getElementById("addOutputComponent").style.visibility = 'hidden';
});

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <button type="button" class="btn btn-secondary" id="openModalDialog">Open Modal Dialog</button>

<!-- Logic Func Modal Step 1 -->
<div class="modal fade" id="locigModalStep1"  role="dialog" data-backdrop="static">
    <!-- Modal İçerik -->
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Component Choose</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div style="display: flex; justify-content: space-around;">
            <figure>
              <figcaption style="text-align: center;">Add KNX Component</figcaption>
              <div style="text-align: center;">
                <img id="addKnxComponent"
                     src="https://img.icons8.com/?size=512&id=24717&format=png"
                     style="max-width: 45px; max-height: 45px; cursor: pointer;" />
              </div>
            </figure>
            <figure>
              <figcaption style="text-align: center;">Add INPUT Component</figcaption>
              <div style="text-align: center;">
                <img id="addInputComponent"
                     src="https://img.icons8.com/?size=512&id=24717&format=png"
                     style="max-width: 45px; max-height: 45px; cursor: pointer;" />
              </div>
            </figure>
            <figure>
              <figcaption style="text-align: center;">Add OUTPUT Component</figcaption>
              <div style="text-align: center;">
                <img id="addOutputComponent"
                     src="https://img.icons8.com/?size=512&id=24717&format=png"
                     style="max-width: 45px; max-height: 45px; cursor: pointer;" />
              </div>
            </figure>
          </div>
          <!-- Tablolar -->
          <div id="tableContainer"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" id="logicStep1Close">Kapat</button>
          <button type="button" class="btn btn-primary" id="logicStep1Next">İleri</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <script>
    $("#openModalDialog").click(function () {
        $('#locigModalStep1').modal('show');
    });
  </script>
</body>
</html>

解决方案 #

1. 阻止事件冒泡 #

最可能的原因是删除按钮的点击事件冒泡到了模态框容器，触发了Bootstrap内部的关闭逻辑。修改删除函数，添加事件阻止冒泡：

function deleteLogicTableButtonFunc(event) {
  // 阻止事件冒泡，避免触发模态框关闭
  event.stopPropagation();
  
  const tableId = this.id.replace('deleteTable', '');
  const table = document.getElementById(`tableComponentHeader${tableId}`);
  const operatorContainer = document.getElementById(`logicOperatorContainer${tableId}`);

  table.remove();
  operatorContainer.remove();
}

2. 排查全局DOM监听 #

检查项目中是否存在MutationObserver或其他监听DOM节点删除的全局代码，这类代码可能在删除元素时误操作了模态框的状态。

3. 对齐依赖版本 #

确保项目中使用的jQuery（3.6.0）和Bootstrap（4.0.0）版本与测试环境一致，版本不一致可能导致行为差异。

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