Remove child div from parent div

Question

I want to remove each child div inside a parent div using for loop something like this:

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

Here's my code for reference:

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>

so, I want to remove all divs inside the first di with the Id social

What's the question? Have you tried this? How is it not working? — isherwood, Dec 10 '20 at 20:56
Shouldn't it be `for (var x = 0; x < children.length; x++)`? — Barmar, Dec 10 '20 at 20:57
Your code should work if you do `parent = remove5.querySelectorAll("div");` — Barmar, Dec 10 '20 at 20:59
the parent div its id = social, I want to delete all the divs inside it @Barmar — OmarShuaili, Dec 10 '20 at 21:09
`while (remove5.firstChild) { remove5.removeChild(remove5.firstChild); }` — Parikshith Kedilaya M, Dec 10 '20 at 21:14
@OmarShuaili What problem are you having? If you set `parent` correctly, your code should work. — Barmar, Dec 10 '20 at 21:15
Does this answer your question? [Remove all child elements of a DOM node in JavaScript](https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript) — Lemondoge, Dec 10 '20 at 21:15
All `divs` in side ? or just one layer deep? Do you want to just remove the `div` tag or do you want to remove the div and it's contents. — Jon P, Dec 10 '20 at 21:44

Alvison Hunter · Answer 1 · 2020-12-10T21:56:33.490

Hi Omar,

There is no need to use the loop in this case to clear your parent's div content, we can use the .empty() method using the jQuery Framework for this in order to fulfill this need on the parent. Please be aware that you need to correct a typo on your parent div, you have declared the id attribute twice and only one can be set and will take priority.

With that being said, please go ahead and run this snippet of code, and whatever it is inside the social div will be cleared after you hit the button below the paragraph.

I certainly hope this helps. Cheers, mate!

$("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>

I did now, Jon! thanks for the tip! It seems to be that the person decided to give the answer I had to another post now. Good thing is that he finally found the help he needed. :) — Alvison Hunter, Dec 10 '20 at 21:57

Jon P · Accepted Answer · 2020-12-10T22:00:41.757

If you want to remove all child div use querySelectorAll().

You also have 2 id attributes in your parent div you can only have one.

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>

Remove child div from parent div

2 Answers2