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

【问题标题】：JavaScript Remove() The last input appended onto the domJavaScript Remove() 附加到 dom 的最后一个输入
【发布时间】：2020-06-03 18:02:37
【问题描述】：

我有一个表单，可以将用户的输入放置到 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);
   
  });

【问题讨论】：

标签： javascript append appendchild removechild

【解决方案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');
...

【讨论】：

感谢您的帮助 :) 我遇到了一个错误。我尝试了 h6_w_elements.remove() 并且效果很好，但是当添加 [h6_w_elements.length - 1] 时，它会抛出 app.js:208 Uncaught TypeError: Cannot read property 'remove' of undefined at HTMLAnchorElement. (app.js)。 js:208) 在行 h6_w_elements[h6_w_elements.length - 1].remove() 你知道这是为什么吗？
嗯，你需要将 querySelector 替换为 querySelectorAll。如果有帮助，请标记为帮助我的答案；）
如果输入是空的并且我按下删除按钮它会抛出一个错误有没有办法防止它？

【解决方案2】：

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

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

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

【讨论】：