JS，DOM。使用用户输入值从 DOM 中删除多个元素

Question

下方 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);

});

Codepen Example

Answer 1

如果要删除 DOM 个元素：

    for (i=0;i<steps;i++) {
        dotsArray[0].remove();
        dotsArray.splice(0,1);
    }

Answer 2

听起来你在问如何从 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 个元素（然后也从数组中删除它们）。

JSFiddle showing it working

JS，DOM。使用用户输入值从 DOM 中删除多个元素

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

javascript

dom

svg

removechild