Question

我正在使用Javascript，尝试删除几个元素时遇到问题。每个div都有一个特定的ID，如下所示：

<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<div id='4'></div>

每个div都有一个触发remove（）函数的按钮

document.getElementById(count).remove()

Count是一个变量，每当我创建一个新的div时

remove（）函数有效，但是会产生间隙。如果我删除id = 2的div，则：

<div id='1'></div>
<div id='3'></div>
<div id='4'></div>

但是我希望剩余的ID可以像这样降档：

<div id='1'></div>
<div id='2'></div>
<div id='3'></div>

我想我需要一个for循环，但是我不明白如何做到这一点

Answer 1

在每个元素上使用一个类，如下所示：

<div class="a" id='1'></div>
<div class="a" id='2'></div>
<div class="a" id='3'></div>
<div class="a" id='4'></div>

并在每次删除后调用以下函数：

function resetId(){
    var list=getElementsByClassName("a")
    for(i in list){
        list[i].id=i+1
    }
}

我希望这会有所帮助！

Answer 2

这可能是使用jquery最好的方法。

这是下面的工作代码：

$("div").each(function(i) {    
		$(this).attr('id', ++i);
});

$("#remove").click(function() {
  $("#2").remove();
  $("div").each(function(i) {    
		$(this).attr('id', ++i);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=""><span>0</span></div>
<div id=""><span>0</span></div>
<div id=""><span>0</span></div>
<div id=""><span>0</span></div>
<div id=""><span>0</span></div>

<a href="#" id="remove">remove</a>

工作原理

此处的第一行$(this).attr('id', ++i);用于将数字添加到div ID。我已经在删除功能[("#remove").click(function()中重复了此操作，这是因为一旦div被删除，它将是一个数字更改。

这实际上是一个循环。没有所有代码行。这就是为什么我喜欢jquery：）

在将div id写入$("#2").remove(); #2后就可以在其中找到div id名称，就像在CSS中一样。

如果您注意到了，请检查一下，按照您的要求将数字降档为1。

要使用jquery，必须链接库。 <div id="2">

纯Javascript版本

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

function resetId(){
    var div=document.getElementsByClassName("div")
    for(i in div){
        div[i].id=i++
    }
}

function clicked() {
	var elem = document.getElementById("1");
  elem.parentNode.removeChild(elem);
  resetId();
}

工作原理

这部分是您的循环：

<div class="div" id="0">div</div>
<div class="div" id="1">div</div>
<div class="div" id="2">div</div>
<div class="div" id="3">div</div>

<a href="#" onclick="clicked()">Remove</a>

在删除一个数字后，本节非常简单地重写数字0-4。它从0开始的原因是因为在编程中我们从0开始计数。Hay 0也是一个数字：）。

for(i in div){ div[i].id=i++ }基本上是一个小型int [ish]，随着循环计数通过多少个div而增加。

这个i++和这个var elem = document.getElementById("1");就是为什么我发现jquery在这种情况下更可以接受的原因。没那么受欢迎。

最后elem.parentNode.removeChild(elem);我们必须调用该函数，否则它并没有发生任何变化，因为计算机很愚蠢，需要告知。

读物

https://api.jquery.com/

http://www.lucemorker.com/blog/javascript-vs-jquery-quick-overview-and-comparison

Answer 3

听起来像您应该使用类并通过索引引用元素。为了清楚起见，ID应该保持不变。

document.getElementsByClassName('my-class')[2].remove();

<div class="my-class" id="thing1">One</div>
<div class="my-class" id="thing2">Two</div>
<div class="my-class" id="thing3">Three</div>
<div class="my-class" id="thing4">Four</div>

在函数remove（）之后降级剩余的ID

3 个答案: