Best possible way to remove html elements that are in an js array?

Question

What i need is a JS function deleteSelected() That removes the elements that are in the selectedDivs array from my HTML page. What is the most effective way?

Delete selected HTML:

<div class="DRAGGABLE ui-draggable" onclick="addDevice(this)" style="position: absolute; width: 240px; height: 41px; top: 126px; left: 27px;">
  <img id="PMF00" src="/devices/AIRC1-010.gif">
</div>

JS:

function addDevice(e) {
  if ($ctrlBeingpressed == true) {
    selectedDivs.push(e);
    e.style.border = "2px dotted black";
  }
}

Apparantely there is already a post for this :/

Just to be clear, are you asked us how to remove nodes from the DOM, or DOM elements that you've added to a simple JS array? Because most of the answers are for the first one. — Andy, Oct 23 '13 at 09:20

Artyom Neustroev · Answer 1 · 2013-10-23T09:23:57.990

4

If your selectedDivs array contains actual DOM elements, you can do the following:

function deleteSelected() {
   for (var i = 0; i < selectedDivs.length; i++) {
      var el = selectedDivs[i];
      el.parentNode.removeChild(el);
   }
   selectedDivs = [];
}

edited Oct 23 '13 at 09:23

answered Oct 23 '13 at 09:17

Artyom Neustroev

8,627
5
33
57

Will onclick="addDevice(this)" provide the DOM element ? – Firebirdz Oct 23 '13 at 09:17
Very strange, this works only the first time, after that it gives; TypeError: el.parentNode is null – Firebirdz Oct 23 '13 at 09:20
1

@Firebirdz it is because elements are still in array, but not in DOM. You need to clear your `selectedDivs` once the method finished. Edited answer. – Artyom Neustroev Oct 23 '13 at 09:23
You are my hero Artyom Neustroev! – Firebirdz Oct 23 '13 at 09:27

score 1 · Answer 2 · answered Oct 23 '13 at 09:18

1

You need to use the removeChild method

for (var i = 0, len = selectedDivs.length; i< len; i++){
  var node = selectedDivs[i];
  node.parentNode.removeChild(node);
}

answered Oct 23 '13 at 09:18

Gabriele Petrioli

191,379
34
261
317

Best possible way to remove html elements that are in an js array?

2 Answers2