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。

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

...
// 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.

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

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

JavaScript Remove() 附加到 dom 上的最后一个输入

JavaScript Remove() The last input appended onto the dom

javascript

append

appendchild

removechild