innerHTML替换的方式存在多种替换 #3397
Description
<li class="menu-item">
<a href="javascript:void(0);" hx-get="views/itemdetail.html" hx-target="#app" hx-trigger="click" class="menu-link">
<div>产品详情</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" hx-get="views/grouped.html" hx-target="#app" hx-trigger="click" class="menu-link">
<div>分组管理</div>
</a>
</li> 假设我点击第一个，innerHTML的交换机制是直接移除了#app下面的整体html从而替换新的，此时我点击第二个也是整体移除，但是当我处于第二个菜单，我再次点击第二个菜单，innerHTML的移除就变为了首先移除#app最内侧的元素，从内往外移除，并不是整体移除替换。为什么会出现这种差异？
也就是点击相同菜单，innerHTML的交换删除机制变为了从内往外移除移除，不是整体移除。
<div id="itemdetail" style="display: none;">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-3 mb-3 mb-lg-0">
<label class="form-label">我是测试数据</label>
<input type="text" id="item_basicdata" class="form-control" placeholder="请输入名称" />
</div>
</div>
</div>
<div class="table-responsive text-nowrap">
<table class="table">
<thead>
<tr>
<th>ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
</tr>
</tbody>
</table>
</div>
<div class="card-body">
<ul class="pagination pagination-rounded"></ul>
</div>
</div>
</div>二次点击首先会移除其次是再次是
最后是<div id="itemdetail" 请求如何能让移除方法一直是整体移除，我使用了outerHTML 也是同innerHTML一样的移除方式，都是第一次整体移除，当涉及到重复就会从内往外一个个移除