JavaScript Remove（）追加到dom的最后一个输入

Question

我有一个将用户输入放置到dom上并删除它们的表格。但是问题在于remove（）函数正在删除首先放置在dom上的第一个输入。我试图弄清楚如何删除附加到dom上的最后一个输入。请帮助:)

// Delete From The Dom.
const delBtn = document.querySelector('.del-btn');

delBtn.addEventListener('click', (e) => {
  // Remove Form Input.
  let h6_w = document.getElementById('h6_weight');
 
    h6_w.remove();
});


// Add User's input To The Dom.
const addDom = document.querySelector('.add-dom');
const wForm = document.querySelector('.weight-form');
  
wForm.addEventListener('submit', (e) => {
e.preventDefault();

   // Get Input Value.
   const value = wForm.querySelector('input[type="number"]').value;
   const value1 = wForm.querySelector('input[type="text"]').value;

   // Create Elements.
   const h6_weight = document.createElement('h6');

   // Adding Id.
   h6_weight.setAttribute('id','h6_weight');

   // Add Content.
   h6_weight.textContent = value + value1;

   // Append To Dom.
   addDom.appendChild(h6_weight);
   
  });

Answer 1

这是因为dom元素的ID重复。您需要不同地设置每个元素的id。

或者您可以为每个新元素设置相同的类以查询最后一个元素。

...
// Remove Form Input.
let h6_w_elements = document.querySelector('.h6_weight_class');
h6_w_elements[h6_w_elements.length - 1].remove();
...

// Add User's input To The Dom.
...
// Adding Id.
h6_weight.classList.add('h6_weight_class');
...

Answer 2

正如我所看到的，您将一个id分配给多个元素。您应该将其替换为class属性，因为id值在HTML文档中必须是唯一的。 W3 Schools。

要选择某个类的最后一个元素，您可以使用：

const elements = document.querySelectorAll(".class");
const lastElement = elements[elements.length - 1];