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

Question

我有以下结构..我想删除div.son但保留div.grandson，这可能吗？！或者改变你的<tag>也是一个解决方案..例如：从 a 更改<fieldset>为 a <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>

Answer 2

你可以看看这个答案，下次尝试使用搜索栏。

如果你只是想跳过答案。

var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);