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

Question

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

我正在尝试动态更改 div 的 ID 并删除附加到父 div 的按钮。当用户单击 ID 为 removeButton2 的按钮时，我希望 removeButton3 的 ID 更改为 removeButton2 和 removeButton4 to removeButton3 的 ID。 即，在删除按钮 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++;



     }

   });
});

我收到以下消息：

Uncaught TypeError: Cannot set property 'id' of null

Answer 1

你有：

var myId = this.id;

$(this).remove();

document.getElementById(myId).id=...

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

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

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