使用javascript访问动态生成的HTML元素ID时获取null

使用javascript访问动态生成的HTML元素的ID时获取null

我正在尝试动态更改div的id并删除附加到父div的按钮。当用户单击id为removeButton2的按钮时，我希望

removeButton3

的id更改为

removeButton2

，而

removeButton4的id更改为removeButton3

。 i、 移除按钮后，应更新id。 但我得到的是空值。我不明白为什么。 这是我目前使用的代码：

var removeButtonCounter =0;
var divCounter=0;
var addButtonClickCount=0;
$('#AddButton').on('click',function() 
{ 
  removeButtonCounter++; divCounter++;addButtonClickCount++;

  $('#diplayContainerDiv').append('<div id="divQueryDisplay'+   divCounter +'"></div><div id="removeButtonDiv"><input type="button"  value="Remove" name="removeButton" id="removeButton'+  removeButtonCounter +'"> </div>');

  $("#removeButton" + removeButtonCounter).click(function() {
    var myId = this.id; 

  var lastChar = myId.slice(-1);
  valRemoveButtonClickLastChar = lastChar;
  $(this).remove();


   var i=valRemoveButtonClickLastChar;

   while(i<=addButtonClickCount)
   {
        document.getElementById(myId).id="removeButton"+i;  // null value is being passed

        document.getElementById("divQueryDisplay"+(parseInt(i)+1)).id="divQueryDisplay"+i;   // null value is being passed here    



      i++;



     }

   });
});

你有：

var myId=this.id

$（this.remove（）

document.getElementById（myId）.id=…

您正在删除具有
myID
的元素，但随后尝试再次选择该元素并分配给它

我强烈建议不要像那样动态地更改ID，但如果您真的想这样做，一次迭代所有按钮可能会更容易：

document.querySelectorAll('div[id^="removeButton"]').forEach((removeButton, i) => {
  removeButton.id = 'removeButton' + i;
});

你能用plunkr或CodePen分享你的代码吗分享html代码我没有得到任何错误。我想这对我很有用。如何知道ID是否已更新？请在浏览器中随意使用
Inspect
，我想你能解释一下你的代码吗？我的意思是每个id在removeButton的末尾都包含一个int值，“removeButton.id”不包含相同的值。=>的作用是什么？它在Eclipse中以红色下划线，它以
removeButton
开始的ID迭代每个div，并为每个div分配一个新的ID
'removeButton'+i
，其中
i
是循环的当前索引（从0开始）
params=>
是ES2015中的箭头函数，是
函数（params）
的缩写-如果您的编辑器无法识别它，您可能需要一个新的编辑器。古老的浏览器不支持它，但它在编写代码时被广泛使用（稍后使用Babel进行传输）。
document.querySelectorAll('div[id^="removeButton"]').forEach((removeButton, i) => {
  removeButton.id = 'removeButton' + i;
});