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

-1

下面的Codepen示例。任何人都可以解释如何根据用户输入值（只是一个整数）从DOM中删除一些元素。我有一条路径（SVG曲线）。用户指定多个步骤（点）以到达路径的终点。然后，在某些事件发生后，船舶将前往终点（用于测试，我正在使用点击事件）。用户将为每个事件指定每次移动的步数（事件完成船开始移动）。通过移动，我想删除留下的传球点。JS，DOM。使用用户输入值从DOM删除多个元素

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

来源

2016-01-20 geliokant

退房['splice']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice）。 –

[在JavaScript中删除数组中的特定元素？]（http://stackoverflow.com/questions/5767325/remove-a-particular-element-from-an-array-in-javascript） –

如果要删除DOM元素：

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

来源

2016-01-20 23:43:59 Gavriel

这只是1用户指定的号码。我尝试拼接......但由于缺乏知识和经验...至于我，一些奇怪的事情发生在拼接它删除1然后2，然后3个元素 - 索引在数组中......但不是元素本身（我意思是来自页面，他们停留在页面上，但控制台说他们从数组中删除...），如我所料（点是一个SVG ）。 – geliokant

请添加示例输入，预期输出，因为它不清楚。在那里你问到删除几个元素，现在你说1个号码 – Gavriel

@geliokant数组和DOM是完全独立的对象。 – Barmar

听起来像你问如何删除从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

来源

2016-01-21 00:25:54

正如我所说，我正在通过实例学习。你能解释一下，如果你有时间我做错了什么？ http://codepen.io/anon/pen/gPoWae（使用CSS的运动路径，所以只适用于Chrome ...） – geliokant

这似乎是一个完全不相关的问题。用正确的标签打开一个新的问题。 –

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

回答

相关问题