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

Question

Example on Codepen below. Can anybody explain as simple as posible how to delete a number of elements from DOM based on a user input value (just an integer). I have a path(SVG curve). User specifies a number of steps(dots) to reach the end point of the path. Then ship will travel to the end point, after some event ( for test I'm using click event ). User will specify a number of steps per move for each event ( event done ship start moving ). And by moving i want to delete dots on the pass that are left behind.

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

Check out [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice). — Mike Cluck, Jan 20 '16 at 23:38
Possible duplicate of [Remove a particular element from an array in JavaScript?](http://stackoverflow.com/questions/5767325/remove-a-particular-element-from-an-array-in-javascript) — Nick Zuber, Jan 21 '16 at 00:04

Gavriel · Accepted Answer · 2016-01-21T01:38:29.023

1

If you want to remove DOM elements:

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

edited Jan 21 '16 at 01:38

answered Jan 20 '16 at 23:43

Gavriel

18,088
12
63
98

It's just 1 number specified by user. I've tried splice... but because of lack of knowledge and experience... as for me, something strange happens with splice it delete 1 then 2, then 3 elements-indexes in array...but not elements themselves ( i mean from page, they stay on page but console says that they are deleted from array...) as i expected ( dots are an SVG ). – geliokant Jan 20 '16 at 23:53
please add example input, expected output, as it's not clear. There you ask about deleting several elements, now you say 1 number – Gavriel Jan 20 '16 at 23:55
2

@geliokant The array and the DOM are totally separate objects. – Barmar Jan 21 '16 at 00:02
@Barmar Thanks! 0=) And anyway is it posible to delete a number elemetns at once from DOM? ) – geliokant Jan 21 '16 at 00:05
@geliokant You can do it with jQuery, `$(selector).remove()` will remove all the elements that match the selector. In raw Javascript, you have to write a loop to delete each element. – Barmar Jan 21 '16 at 00:07
yes, but it depends on many things. For example removing the parent removes all the children, but that's not what you want. You could also use jQuery and remove many elements with a css class selector: $(".toRemove").remove() – Gavriel Jan 21 '16 at 00:07
can you give an example please. Trying to learn plain JS before going further... not the best way...learning by making... but anyway ) – geliokant Jan 21 '16 at 00:11
@geliokant, if I understand what you want is this: you have an array with index positions: [1,5,8] and you want to delete the 1st, 5th, 8th element from dom? Then you'll need to do a loop IMHO – Gavriel Jan 21 '16 at 00:15
i have dots on SVG path (just a curve). For each move user specifies a number of steps that ship will pass. ( user input 1 - ship goes from it's current position - dot to the next point, user inputs 5 ship goes from it's current position to current position+5 dots ) Sorry for my English ) – geliokant Jan 21 '16 at 00:21
and by passing this dots i want to delete them. if user specifies 5 i want to delete 5 ) – geliokant Jan 21 '16 at 00:23
yes, for the 1st step it works ( i mean first click )! but next click and it stop working... – geliokant Jan 21 '16 at 01:34
1

God Bless You!!!!! ))))) I was trying to find out how to do this for 2 days! ))) Thanks A Lot! ) – geliokant Jan 21 '16 at 01:45

score 0 · Answer 2 · answered Jan 21 '16 at 00:25

Sounds like you're asking how to remove elements from the DOM, which happen to be stored in an Array.

The Array that happens to be holding some DOM elements and the DOM/elements themselves are completely unrelated concepts. There will be no native Array method for dealing with the DOM, because Arrays are not a DOM concept, they are a general programming construct of JS. They could be holding DOM elements, Strings, Numbers, other Arrays, Objects, null Objects, or a combination of all the above...or more. There is nothing about Arrays that is specific to the DOM...that just happens to be what you have shoved into that Array.

For that you're simply gonna need to loop through the Array and remove the elements. I'd recommend making a function to do so if you're gonna be doing it a lot:

// 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);
}

You'd use like removeArrElemsFromDOM(myArray, 0, 2); would remove the first 2 elements of the array from the DOM (and also then cut them from the Array as well).

JSFiddle showing it working

As i said, i'm learning by making and by examples. Can you please explain, if you have time what i'm doing wrong? http://codepen.io/anon/pen/gPoWae ( using CSS motion-path, so works only in Chrome...) — geliokant, Jan 21 '16 at 00:48
That seems like a completely unrelated question. Open up a new question for it with the correct tags. — Jimbo Jonny, Jan 21 '16 at 00:54

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

2 Answers2