Question

使用本机javascript删除div中的最后3个div

它应该首先看起来像这样：

<div id="name">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
</div>

删除后：

<div id="name">
      <div>one</div>
      <div>two</div>
</div>

我尝试通过为其分配单独的ID名称来删除它，但是由于其不断变化和改组，因此无法跟踪更改。

Answer 1

后三个可以用节点列表上的.slice(-3)标识（转换为数组时）：

const parent = document.querySelector("#name");
[...parent.children].slice(-3).forEach(parent.removeChild.bind(parent));

<div id="name">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
</div>

Answer 2

您可以使用:nth-last-child(-n+3)选择最后3个div并在迭代中将其删除

document.querySelectorAll('#name > div:nth-last-child(-n+3)').forEach(n => {
  n.parentNode.removeChild(n)
})

<div id="name">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>five</div>
</div>

Answer 3

您可以使用#name获取document.querySelectorAll('#name>div')的所有子节点。其余的应该足够容易：

function deleteLast3() {
  var childrens = document.querySelectorAll('#name>div');
  for (var index = 0; index < childrens.length; index++) {
    if (index >= childrens.length - 3) childrens[index].remove();
  }
}

<div id="name">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>five</div>
</div>
<button onclick="deleteLast3()">Delete 3</button>

Answer 4

反向浏览该集合，并删除找到的前三个：

let divs = document.querySelectorAll("#name > div"); // Get all the child divs

// Set up loop to go from highest index to lowest, but not to the first two
for(var i = divs.length -1; i > 1; i--){
  // Remove node at the current index
  divs[i].parentNode.removeChild(divs[i]);
}

<div id="name">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
</div>

Answer 5

您可以使用以下代码：

编辑：使用parentDivDOM.children检索父div的所有直接chilldren。然后，从最后一个开始，检查它是否为div，并检查其标签名称：如果是，则将其删除。

请注意，您还跟踪使用div变量删除了多少count。

const parentDivDOM = document.getElementById("name");
const childrenDOM = parentDivDOM.children;

for (let i=childrenDOM.length-1, count=0; i>=0 && count<3; i--) {
  if (childrenDOM[i].tagName === "DIV") {
    childrenDOM[i].parentElement.removeChild(childrenDOM[i]);
    count++;
  }
}

<div id="name">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
</div>

Answer 6

尽管是javascript的问题，我还是建议使用jQuery。

$('#name').find("div").slice(-3).remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="name">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
</div>

希望有帮助。

Answer 7

这是一个尝试

function deleteLast3() {
document.querySelectorAll('#name div')
.forEach(function (x, i, self){
if (self.length -3 <= i) 
    x.remove();
});
}

<div id="name">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>five</div>
</div>
<button onclick="deleteLast3()">Delete 3</button>

如何删除div中的最后3个div

7 个答案: