javascript - 是否可以删除 html 元素并让您的 child 使用 javascript？

Question

我有以下结构..我想删除 div.son但保留div.grandson ， 那可能吗 ？!或更改您的 <tag>也将是一个解决方案..例如:从 <fieldset> 更改到 <div> ，请记住我无法访问 HTML，每个更改都必须使用 ** javascript ** 完成!

<div class="father">
  <fieldset class="son">
    <div class="grandson">Content here</div>
    <div class="grandson">Content here</div>
    <div class="grandson">Content here</div>
    <div class="grandson">Content here</div>
  </fieldset>
</div>

我尝试使用 removeChild () ** javascript ** 的功能，但它会删除整个元素。

Answer 1

在删除其他任何内容之前，可以使用普通 JavaScript 深度克隆孙子的节点。然后将其附加回父级。当然如果你想把它放在其他地方，你需要附加所需的 DOM 遍历逻辑。 (CSS部分仅用于结果的视觉验证)

const grandson = document.querySelector('.grandson');
const father = grandson.closest('.father');
const clonedGrandson = grandson.cloneNode(true);

father.querySelector('.son').remove();
father.appendChild(clonedGrandson);

.father {
  background-color: red;
  padding: 20px;
 }
 
 .son {
  background-color: blue;
  padding: 20px;
 }
 
 .grandson {
  background-color: green;
  padding: 20px;
 }

<div class="father">
  <fieldset class="son">
    <div class="grandson">
      <p>Save me</p>
    </div>
  </fieldset>
</div>