JS,DOM。使用用户输入值从 DOM 中删除多个元素
JS, DOM. Delete several elements from DOM using user intput value
下方 Codepen 上的示例。任何人都可以尽可能简单地解释如何根据用户输入值(只是一个整数)从 DOM 中删除多个元素。我有一条路径(SVG 曲线)。用户指定到达路径终点的步数(点)。然后船将在某些事件后到达终点(为了测试我正在使用点击事件)。用户将为每个事件指定每次移动的步骤数(事件完成船开始移动)。通过移动,我想删除通道上留下的点。
var trigger = window.addEventListener('click', function(){
var steps = parseInt(prompt("Select Number Of Steps Per Move "),10);
var positionVal = parseFloat(window.getComputedStyle(el,null).getPropertyValue("motion-offset"));
el.animate([
{ motionOffset: positionVal + "%" },
{ motionOffset: positionVal + 100/(userValue - 1)*steps + "%" }
],
{duration: 5000,
direction: 'alternate',
fill: 'forwards',
iterations: 1,
easing: 'ease-in-out'
});
function deleteThis () {
dotsArray.splice(positionVal, steps)
var dots = document.getElementsByClassName("dots");
for (i=0;i<steps;i++) {
dots[i].remove();
}
}
window.setTimeout(deleteThis,3000);
});
如果要删除 DOM 个元素:
for (i=0;i<steps;i++) {
dotsArray[0].remove();
dotsArray.splice(0,1);
}
听起来你在问如何从 DOM 中删除恰好存储在数组中的元素。
恰好包含一些 DOM 元素的数组和 DOM/elements 本身是完全不相关的概念。不会有处理 DOM 的原生 Array 方法,因为 Arrays 不是 DOM 的概念,它们是 JS 的通用编程结构。它们可能包含 DOM 个元素、字符串、数字、其他数组、对象、空对象或以上所有内容的组合……或更多。数组没有任何特定于 DOM 的内容...恰好是您推入该数组的内容。
为此,您只需要遍历数组并删除元素。如果您要经常这样做,我建议您制作一个函数:
// removes the elements in the Array from the DOM, then removes them from the Array
function removeArrElemsFromDOM(arr, start, howMany)
{
for (var i=start; i<start+howMany; i++)
arr[i].parentNode.removeChild(arr[i]);
arr.splice(start, howMany);
}
你会像 removeArrElemsFromDOM(myArray, 0, 2);
那样使用将从 DOM 中删除数组的前 2 个元素(然后也从数组中删除它们)。
下方 Codepen 上的示例。任何人都可以尽可能简单地解释如何根据用户输入值(只是一个整数)从 DOM 中删除多个元素。我有一条路径(SVG 曲线)。用户指定到达路径终点的步数(点)。然后船将在某些事件后到达终点(为了测试我正在使用点击事件)。用户将为每个事件指定每次移动的步骤数(事件完成船开始移动)。通过移动,我想删除通道上留下的点。
var trigger = window.addEventListener('click', function(){
var steps = parseInt(prompt("Select Number Of Steps Per Move "),10);
var positionVal = parseFloat(window.getComputedStyle(el,null).getPropertyValue("motion-offset"));
el.animate([
{ motionOffset: positionVal + "%" },
{ motionOffset: positionVal + 100/(userValue - 1)*steps + "%" }
],
{duration: 5000,
direction: 'alternate',
fill: 'forwards',
iterations: 1,
easing: 'ease-in-out'
});
function deleteThis () {
dotsArray.splice(positionVal, steps)
var dots = document.getElementsByClassName("dots");
for (i=0;i<steps;i++) {
dots[i].remove();
}
}
window.setTimeout(deleteThis,3000);
});
如果要删除 DOM 个元素:
for (i=0;i<steps;i++) {
dotsArray[0].remove();
dotsArray.splice(0,1);
}
听起来你在问如何从 DOM 中删除恰好存储在数组中的元素。
恰好包含一些 DOM 元素的数组和 DOM/elements 本身是完全不相关的概念。不会有处理 DOM 的原生 Array 方法,因为 Arrays 不是 DOM 的概念,它们是 JS 的通用编程结构。它们可能包含 DOM 个元素、字符串、数字、其他数组、对象、空对象或以上所有内容的组合……或更多。数组没有任何特定于 DOM 的内容...恰好是您推入该数组的内容。
为此,您只需要遍历数组并删除元素。如果您要经常这样做,我建议您制作一个函数:
// removes the elements in the Array from the DOM, then removes them from the Array
function removeArrElemsFromDOM(arr, start, howMany)
{
for (var i=start; i<start+howMany; i++)
arr[i].parentNode.removeChild(arr[i]);
arr.splice(start, howMany);
}
你会像 removeArrElemsFromDOM(myArray, 0, 2);
那样使用将从 DOM 中删除数组的前 2 个元素(然后也从数组中删除它们)。