如何从一组元素中删除所有边框（除了创建的边框以外）？

Question

我试图动态地使所有边框消失，除了最新创建的容器的边框，我尝试了JavaScript的注释掉部分。 有人可以提供解释/示例如何完成此操作吗？

 function countButtonLinks() { var elementGroups = document.getElementById('containsAll'); if(elementGroups.children.length == 0) { var numID = 1; } if(elementGroups.children.length == 1) { var numID = 2; } if(elementGroups.children.length == 2) { var numID = 3; } if(elementGroups.children.length == 3) { var numID = 4; } if(elementGroups.children.length == 4) { var numID = 5; } if(elementGroups.children.length == 5) { var numID = 6; } return numID; } function createContainer() { if(document.getElementById('containsAll').children.length < 6) { var elementA = document.createElement("span"); var elementAInnerTxt = document.createElement("div"); elementA.id = 'elem' + countButtonLinks(); elementAInnerTxt.id = 'elemInner' + countButtonLinks(); elementA.className = 'elem1'; elementAInnerTxt.className = 'elemInner1'; elementA.appendChild(elementAInnerTxt); document.getElementById('containsAll').appendChild(elementA); } } 

 .containsAll { width: 91%; height: 75%; position: absolute; float: left; margin-top: 1%; margin-left: 1%; background-color: transparent; z-index: 91; border: 1px #000000 solid; border-radius: 7px; padding: 5px; } .elem1 { max-width: 100%; max-height: 100%; min-width: 100px; min-height: 60px; float: left; background-color: transparent; border: 1px #333333 solid; border-radius: 5px; } .elemInner1 { max-width: 100%; max-height: 100%; min-width: 100px; min-height: 60px; float: left; background-color: transparent; padding: 5px; } .buttonClass { width: 100px; height: 50px; } 

 <button class="buttonClass" type="button" onclick="createContainer();">Click Me</button> <div id="containsAll" class="containsAll"></div> 

请，没有JQuery。

Answer 1

function countButtonLinks(){
    var elementGroups = document.getElementById('containsAll');
    // you don't need to use 'var numID'
    return elementGroups.children.length + 1; 
}

function createContainer(){
if(document.getElementById('containsAll').children.length < 6){

  // add code here
  for(var i=0;i<document.getElementById('containsAll').children.length;i++){
    document.getElementById('containsAll').children[i].style.border = '0 none';
  }

var elementA = document.createElement("span");

//...

Answer 2

只需调用元素的现有子元素并删除边框，然后再插入另一个元素：

function countButtonLinks(){
    var elementGroups = document.getElementById('containsAll');
    var groupLength = elementGroups.children.length;

    return groupLength++;
}

function createContainer() {
    var containsAll = document.getElementById('containsAll'),
        childrenLength = containsAll.children.length;

    if (childrenLength >= 6) {
        return; // Bail immediately since we only need to add a new element if the children's length is less than 6
    }

    // Call previous children
    for ( var i = 0; i < childrenLength; i++ ) {
        let child = containsAll.children[i];

        // You can add a new class here that will remove the border
        // but in this example, we'll use the style attribute to remove the border
        child.style.border = 0;
    }

    // Now, add the new element
    var elementA = document.createElement("span");
    var elementAInnerTxt = document.createElement("div");
    elementA.id = 'elem' + countButtonLinks();
    elementAInnerTxt.id = 'elemInner' + countButtonLinks();
    elementA.className = 'elem1';
    elementAInnerTxt.className = 'elemInner1';
    elementA.appendChild(elementAInnerTxt);
    containsAll.appendChild(elementA);
}

另外，如果要在函数中多次使用元素，请养成将元素存储在变量中的习惯，这样就不必重复调用document.getElementById函数。

Answer 3

您可以使用CSS ：last-child选择器来完成此操作

 var container = document.getElementById('container'); function count_button_links() { return container.children.length + 1; } function new_container() { if (count_button_links() > 6) return false; let span = document.createElement('span'); span.id = 'el_' + count_button_links(); span.className = 'box'; container.appendChild(span); } 

 #container { width: 100%; background-color: transparent; border: 1px solid #000; border-radius: 7px; padding: 5px; display:flex; height:200px; } .box { flex:0 0 100px; height:60px; background-color: transparent; border-radius: 5px; } .box:last-child{ border:1px solid #333; } button { width: 100px; height: 50px; } 

 <button type="button" onclick="new_container();">Click Me</button> <div id="container"></div>