从父 div 中删除子 div [重复]答案

【问题标题】：Remove child div from parent div [duplicate]从父 div 中删除子 div [重复]
【发布时间】：2021-03-22 07:52:57
【问题描述】：

我想使用 for 循环删除父 div 中的每个子 div，如下所示：

for (var x = 0; x < parent.length; x++) {
  parent[x].remove();
}

这是我的参考代码：

var remove5 = document.getElementById('social');

<div class="col-md-4" id="col-md-4" id="social">
  <div class="footer-col" id="footer-col">
    <h4>Social Media</h4>
    <span class="fa-stack">
      <a href="#your-link">
        <i class="fas fa-circle fa-stack-2x"></i>
        <i class="fab fa-facebook-f fa-stack-1x"></i>
      </a>
    </span>
    <span class="fa-stack">
      <a href="#your-link">
        <i class="fas fa-circle fa-stack-2x"></i>
        <i class="fab fa-twitter fa-stack-1x"></i>
      </a>
    </span>
    <span class="fa-stack">
      <a href="#your-link">
        <i class="fas fa-circle fa-stack-2x"></i>
        <i class="fab fa-google-plus-g fa-stack-1x"></i>
      </a>
    </span>
    <span class="fa-stack">
      <a href="#your-link">
        <i class="fas fa-circle fa-stack-2x"></i>
        <i class="fab fa-instagram fa-stack-1x"></i>
      </a>
    </span>
    <span class="fa-stack">
      <a href="#your-link">
        <i class="fas fa-circle fa-stack-2x"></i>
        <i class="fab fa-linkedin-in fa-stack-1x"></i>
      </a>
    </span>
  </div>
</div>

所以，我想删除 ID 为 social 的第一个 di 内的所有 div

【问题讨论】：

有什么问题？你试过这个吗？它怎么不工作？
不应该是for (var x = 0; x < children.length; x++)吗？
如何设置变量parent？
如果你这样做，你的代码应该可以工作parent = remove5.querySelectorAll("div");
这能回答你的问题吗？ Remove all child elements of a DOM node in JavaScript

标签： javascript html css

【解决方案1】：

如果您想删除所有子 div，请使用 querySelectorAll()。

您的父级div 中也有 2 个 id 属性，您只能有一个。

let childDivs = document.querySelectorAll("#social > div");
for(var i = 0; i < childDivs.length; i++){
  childDivs[i].remove();
}

<div class="col-md-4" id="social">
  <div class="footer-col" id="footer-col">
    <h4>Social Media</h4>
    <span class="fa-stack">
                            <a href="#your-link">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-facebook-f fa-stack-1x"></i>
                            </a>
                        </span>
    <span class="fa-stack">
                            <a href="#your-link">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-twitter fa-stack-1x"></i>
                            </a>
                        </span>
    <span class="fa-stack">
                            <a href="#your-link">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-google-plus-g fa-stack-1x"></i>
                            </a>
                        </span>
    <span class="fa-stack">
                            <a href="#your-link">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-instagram fa-stack-1x"></i>
                            </a>
                        </span>
    <span class="fa-stack">
                            <a href="#your-link">
                                <i class="fas fa-circle fa-stack-2x"></i>
                                <i class="fab fa-linkedin-in fa-stack-1x"></i>
                            </a>
                        </span>
  </div>
</div>

【讨论】：

【解决方案2】：

嗨，奥马尔，

在这种情况下不需要使用循环来清除你父母的div内容，我们可以使用jQuery Framework的.empty()方法来满足这个需求在父母身上。请注意，您需要更正父 div 上的拼写错误，您已经声明了两次 id 属性，并且只能设置一个并且将优先考虑。

话虽如此，请继续运行这段 sn-p 代码，点击段落下方的按钮后，社交 div 中的任何内容都会被清除。

我当然希望这会有所帮助。干杯，伙计！

$("button").click(function(){
    $("#social").empty();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <div class="col-md-4" id="social">
         <div class="footer-col" id="footer-col">
            <h4>Social Media</h4>
            <p>This text and the title above will be erased when you click the button below.</p>
            <span class="fa-stack">
            <a href="#your-link">
            <i class="fas fa-circle fa-stack-2x"></i>
            <i class="fab fa-facebook-f fa-stack-1x"></i>
            </a>
            </span>
            <span class="fa-stack">
            <a href="#your-link">
            <i class="fas fa-circle fa-stack-2x"></i>
            <i class="fab fa-twitter fa-stack-1x"></i>
            </a>
            </span>
            <span class="fa-stack">
            <a href="#your-link">
            <i class="fas fa-circle fa-stack-2x"></i>
            <i class="fab fa-google-plus-g fa-stack-1x"></i>
            </a>
            </span>
            <span class="fa-stack">
            <a href="#your-link">
            <i class="fas fa-circle fa-stack-2x"></i>
            <i class="fab fa-instagram fa-stack-1x"></i>
            </a>
            </span>
            <span class="fa-stack">
            <a href="#your-link">
            <i class="fas fa-circle fa-stack-2x"></i>
            <i class="fab fa-linkedin-in fa-stack-1x"></i>
            </a>
            </span>
         </div>
      </div>
      <button>Empty Parent Div</button>
   </body>
</html>

【讨论】：

我现在做到了，乔恩！谢谢你的提示！似乎该人决定现在将我必须的答案提供给另一个帖子。好在他终于找到了他需要的帮助。 :)