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刪除多個元素

回答

相關問題