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 /元素本身是完全不相关的概念。没有用于处理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中删除多个元素

2 个答案: