JavaScript Remove() 附加到 dom 上的最后一个输入
JavaScript Remove() The last input appended onto the dom
我有一个表单,可以将用户的输入放入 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);
});
这是因为 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');
...
如我所见,您将一个 id
分配给多个元素。您应该将其替换为 class
属性,因为 id 值在 HTML 文档中必须是唯一的。 W3 Schools.
要选择某些 class 的最后一个元素,您可以使用:
const elements = document.querySelectorAll(".class");
const lastElement = elements[elements.length - 1];
我有一个表单,可以将用户的输入放入 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);
});
这是因为 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');
...
如我所见,您将一个 id
分配给多个元素。您应该将其替换为 class
属性,因为 id 值在 HTML 文档中必须是唯一的。 W3 Schools.
要选择某些 class 的最后一个元素,您可以使用:
const elements = document.querySelectorAll(".class");
const lastElement = elements[elements.length - 1];