Deleting child divs in Javascript

Question

I have a div on my website that contains several other divs. This is the structure of the divs:

<div id="outside-one">
    <div class="inside" id="1"></div>
    <div class="inside" id="2"></div>
    <div class="inside" id="3"></div>
    <div class="inside" id="4"></div>
    <div class="inside" id="5"></div>
    <div class="inside" id="6"></div>
    <div class="inside" id="7"></div>
    <div class="inside" id="8"></div>
    <div class="inside" id="9"></div>
    <div class="inside" id="10"></div>
</div>

I would like to delete five ( or X number ) child divs out of that parent. The only issue i have is that the first div (in the example above with the id 1 ) needs to stay in there.

I would like to just give them the display:none property in css so that they are not deleted but they are not visible to the user anymore.

So basically i am looking for a way to hide five divs at the same time without touching the first one in there. The id's of the child divs are not in always in order by the way or in other words, i don't know the id's of the divs before i fire the function. I would like to run this function over and over again. So i don't know if the display idea is the way to go.

Is there a way to this with javascript? Thanks

Answer 1

Here's a quick and easy way to remove the last x children from the parent, while always keeping the first one. For the purposes of this example, I've used button clicks to trigger the function.

This is the ES6 version of the code:

{
    // Ignore this first line, it's just a lazy way of adding the child divs!
    let p=document.getElementById("parent"),d=document.createElement("div"),x=Math.floor(Math.random()*(50-6+1))+6;d.append(document.createTextNode(""));while(x--){d.id=`child${x}`;d.firstChild.nodeValue=`Element ${x}`;p.prepend(d.cloneNode(1));}

    // The real code starts here
    let children=document.getElementById("parent").children,
        length=children.length,
        remove=count=>{
            if(length)
                while(count--&&--length)
                    children[length].classList.add("hide");
            if(!length)
                console.log("All elements have been removed");
        };

    // Event listener to trigger the function
    document.addEventListener("click",event=>{
        let target=event.target;
        if(target.nodeName.toLowerCase()==="button")
            remove(parseInt(target.dataset.remove));
    },0);
}

*{background:#fff;border:0;color:#000;box-sizing:border-box;font-family:sans-serif;font-size:14px;outline:0;padding:0;}button{background:#000;color:#fff;margin:0 5px 5px 0;padding:10px;}div{border:1px solid;padding:5px;}div:nth-child(n+2){margin-top:5px;}
/** The class to be added to the hidden elements **/
div.hide{
    display:none;
}

<button data-remove="3">Remove 3 Elements</button><button data-remove="4">Remove 4 Elements</button><button data-remove="5">Remove 5 Elements</button>
<div id="parent"></div>

And this is the ES5 version:

(function(d){
    // Ignore this first line, it's just a lazy way of adding the child divs!
    var p=d.getElementById("parent"),c=d.createElement("div"),x=Math.floor(Math.random()*(50-6+1))+6;c.appendChild(d.createTextNode(""));while(x--){c.id="child"+x;c.firstChild.nodeValue="Element "+x;p.insertBefore(c.cloneNode(1),p.firstChild);}

    // The real code starts here
    var children=d.getElementById("parent").querySelectorAll("div"),
        length=children.length,
        remove=function(count){
            if(length)
                while(count--&&--length)
                    children[length].classList.add("hide");
            if(!length)
                console.log("All elements have been removed");
        };

    // Event listener to trigger the function
    d.addEventListener("click",function(event){
        var target=event.target;
        if(target.nodeName.toLowerCase()==="button")
            remove(parseInt(target.dataset.remove));
    },0);
})(document);

*{background:#fff;border:0;color:#000;box-sizing:border-box;font-family:sans-serif;font-size:14px;outline:0;padding:0;}button{background:#000;color:#fff;margin:0 5px 5px 0;padding:10px;}div{border:1px solid;padding:5px;}div:nth-child(n+2){margin-top:5px;}
/** The class to be added to the hidden elements **/
div.hide{
    display:none;
}

<button data-remove="3">Remove 3 Elements</button><button data-remove="4">Remove 4 Elements</button><button data-remove="5">Remove 5 Elements</button>
<div id="parent"></div>

Answer 2

You can use jquery for this

$('#outside-one div').each(function(index){
    if(index > 0 && index < 5){
        $(this).hide();
    }
})

Answer 3

Use jQuery slice() method to get a subset of element collection.

// get element between index 1 and 6
$('#outside-one .inside').slice(1, 5).hide()

// or get all child except first and get first 5 elements
$('#outside-one .inside:not(:first-child)').slice(0, 5).hide()

$('#outside-one .inside').slice(1,6).hide()

// or


$('#outside-one .inside:not(:first-child)').slice(0,5).hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outside-one">
  <div class="inside" id="1">1</div>
  <div class="inside" id="2">2</div>
  <div class="inside" id="3">3</div>
  <div class="inside" id="4">4</div>
  <div class="inside" id="5">5</div>
  <div class="inside" id="6">6</div>
  <div class="inside" id="7">7</div>
  <div class="inside" id="8">8</div>
  <div class="inside" id="9">9</div>
  <div class="inside" id="10">10</div>
</div>

---

If you want to select 5 elements at end then

// get all child except first and get last n elements by 
// providing negative value as argument
$('#outside-one .inside:not(:first-child)').slice(-5).hide()

$('#outside-one .inside:not(:first-child)').slice(-5).hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outside-one">
  <div class="inside" id="1">1</div>
  <div class="inside" id="2">2</div>
  <div class="inside" id="3">3</div>
  <div class="inside" id="4">4</div>
  <div class="inside" id="5">5</div>
  <div class="inside" id="6">6</div>
  <div class="inside" id="7">7</div>
  <div class="inside" id="8">8</div>
  <div class="inside" id="9">9</div>
  <div class="inside" id="10">10</div>
</div>

---

UPDATE : With pure js you can do the same with Array#slice method.

// select elements except the first childs and convert it to array
// to converting into array use `[].slice.call()` for older browser
// After converting into array get subset using slice 
// iterate over the subset and update the style
Array.from(document.querySelectorAll('#outside-one .inside:not(:first-child)')).slice(0, 5).forEach(function(ele) {
  ele.style.display = 'none';
})

Array.from(document.querySelectorAll('#outside-one .inside:not(:first-child)')).slice(0, 5).forEach(function(ele) {
  ele.style.display = 'none';
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outside-one">
  <div class="inside" id="1">1</div>
  <div class="inside" id="2">2</div>
  <div class="inside" id="3">3</div>
  <div class="inside" id="4">4</div>
  <div class="inside" id="5">5</div>
  <div class="inside" id="6">6</div>
  <div class="inside" id="7">7</div>
  <div class="inside" id="8">8</div>
  <div class="inside" id="9">9</div>
  <div class="inside" id="10">10</div>
</div>

Answer 4

Get an array of those divs by their classname (or you can use getElementsByTagName if they don't have a class), then create a loop that starts at 1 (the 2nd div) instead of 0 (the 1st div) and set display: none;

var divs = document.getElementById('parent').getElementsByClassName('inside');

for (var i = 1; i <= 5; i++) {
  divs[i].style.display = 'none';
}

<div id="parent">
<div class="inside">1</div>
<div class="inside">2</div>
<div class="inside">3</div>
<div class="inside">4</div>
<div class="inside">5</div>
<div class="inside">6</div>
<div class="inside">7</div>
<div class="inside">8</div>
</div>

Answer 5

A function that can take a selector, from index, and to index to hide any range of elements. Usage: hideElements('#outside-one div', 1, 11) to hide the first 10 div elements from #outside-one except the first one.

function hideElements(selector, f, t){
    $(selector).slice(f, t).hide();
}

Answer 6

Sure it's possible:

function hideElements(offset, length) {
  var insides = $("#outside-one").children();
  for(let i = offset; i < offset+length; i++){
     $(insides[i]).hide();
  }
}

hideElements(1, 5);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outside-one">
    <div class="inside" id="1">1</div>
    <div class="inside" id="2">2</div>
    <div class="inside" id="3">3</div>
    <div class="inside" id="4">4</div>
    <div class="inside" id="5">5</div>
    <div class="inside" id="6">6</div>
    <div class="inside" id="7">7</div>
    <div class="inside" id="8">8</div>
    <div class="inside" id="9">9</div>
    <div class="inside" id="10">10</div>
</div>

Answer 7

jQuery:

$("#outside-one").find("div:not(:first)").hide();

if you want to use javascript it would be slightly more complicated.

Answer 8

here is the simple implementation What you had required.

    <div class='hide'>A</div>
    <div class='hide'>B</div>
    <div class='hide' id='1'>C</div>

<script>
    function showOne(id) {
        $('.hide').not('#' + id).hide();
    }

    showOne(1);​
</script>

http://jsfiddle.net/aymansafadi/kReZn/