在Javascript中删除子div

Question

我的网站上有一个包含其他几个div的div。这是div的结构：

<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>

我想从该父母中删除五个（或X个）子div。我唯一的问题是第一个div（在上面的示例中，id为1）需要留在那里。

我想在css中给他们显示display：none属性，这样就不会删除它们，但是用户不再可以看到它们。

所以基本上我正在寻找一种方法来同时隐藏五个div而不触及那里的第一个div。这个子div的id并不是总是按顺序排列，换句话说，在我触发函数之前我不知道div的id。我想一遍又一遍地运行这个功能。所以我不知道展示的想法是否可行。

使用javascript有没有办法解决这个问题？感谢

Answer 1

按类名获取这些div的数组（或者如果他们没有类，则可以使用getElementsByTagName），然后创建一个从1开始的循环（第二个div）而不是0 （第1个div）并设置display: none;

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用jQuery slice()方法获取元素集合的子集。

// 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>

如果你想在结束时选择5个元素

// 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>

更新：使用纯粹的js，您可以使用Array#slice方法执行相同操作。

// 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 3

jQuery的：

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

如果你想使用javascript，它会稍微复杂一些。

Answer 4

这是简单的实现 你需要什么。

    <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/

Answer 5

当然可以：

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 6

一个函数，可以从索引和索引中选择一个选择器来隐藏任何元素范围。用法：hideElements('#outside-one div', 1, 11)隐藏#outside-one中除前一个之外的前10个div元素。

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

Answer 7

您可以将jquery用于此

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

Answer 8

这是一种从父母那里删除最后一个 x 孩子的快捷方式，同时始终保留第一个。出于本示例的目的，我使用按钮单击来触发该功能。

这是代码的ES6版本：

＆＃13;

＆＃13;

{
    // 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);
}

＆＃13;

*{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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是ES5版本：

＆＃13;

＆＃13;

(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);

＆＃13;

*{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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;