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

Question

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

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