使用用户输入值从 DOM 中删除几个元素

JS, DOM. Delete several elements from DOM using user intput value

本文关键字：元素 几个 删除 用户 输入 DOM      更新时间：2023-09-26

下面的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/元素本身是完全不相关的概念。不会有原生的 Array 方法来处理 DOM，因为数组不是 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 个元素（然后也从数组中删除它们）。

JSFiddle 显示它正在工作

相关文章：