Javascript removeChild array

Question

this looks simple enough but I just can't get it to work. I could add DOM elements but I just can't remove them when using an array.

<script language="javascript">
fields = 0;
count = 0;
function addInput() {
  if (fields != 10) {
      var htmlText =  "<input type='search' value='' name='field[]' />";
      var remButton = "<input type='button' value='del' onclick='remove()' />";
      var newElement = document.createElement('div');

      newElement.id = 'SomeID'+fields; 
      newElement.innerHTML = htmlText + remButton + newElement.id;

      var fieldsArea = document.getElementById('text');
      fieldsArea.appendChild(newElement);

      fields += 1;
  } else {
     ...
  }
count++;
}

// NEED HELP FROM HERE PLEASE
// You don't need to Loop, just get the button's id and remove that entire 'SomeID'


function remove() {
  fieldsArea = document.getElementById('text');


  fieldsArea.removeChild(SomeID1);   <-----------------------THIS WORKS!
  fieldsArea.removeChild(SomeID+count); <------------------THIS JUST WOULDN'T

  count--;
}
</script>

In the remove function, writing SomeID1 works and delete the first added element but when I try to use a 'count', I just can't delete my 'elements'.

Any help would be most appreciated.

Thank you!

Felix Kling · Accepted Answer · 2011-03-14 22:33:02Z

1

You have to get a reference to the element first. Currently you are passing an undefined variable SomeID to the function.

E.g.:

var element = document.getElementById('SomeID' + fields);
// or starting by zero: var element = document.getElementById('SomeID0');
element.parentNode.removeChild(element);

If you want to remove the div for which the button was clicked, you have to pass a reference to the corresponding div to the remove function.

'<input type="button" value="del" onclick="remove(this.parentNode)" />';

this will refer to the button and as it is a child of the div, this.parentNode refers to that div.

You also have to change your function to accept the element that should be removed:

function remove(element) {
  element.parentNode.removeChild(element);   
  count--;
}

You probably also have to update fields, but I'm not sure how your code is supposed to work.

If you want to remove all of them you have to loop:

for(;fields--;) {
   var element = document.getElementById('SomeID' + fields);
   element.parentNode.removeChild(element);
}

Also have a look at the documentation of removeChild.

edited Mar 14, 2011 at 22:33

answered Mar 14, 2011 at 22:18

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

lixcab Over a year ago

Thanks Felix Kling - I'm trying it out now :)

Felix Kling Over a year ago

@lixcab: You had some errors in your HTML (like duplicated closing body tags). I corrected your fiddle and made the delete buttons work. Have a look at it: jsfiddle.net/fkling/GnwpM/1 Also you don't need the count variable. Hope that helps!

lixcab Over a year ago

Thanks again! reviewing now! :)

lixcab Over a year ago

I am an idiot playing with Javascript and you, sir, are not. :) Thank you!

Felix Kling Over a year ago

@lixcab: You're welcome :) Practice, practice, practice ;) Happy coding!

stecb · Accepted Answer · 2011-03-14 22:18:20Z

1

The removeChild needs a node (DOM element) as parameter. In this case

fieldsArea.removeChild(SomeID+count);

you could for example pass the node this way

fieldsArea.removeChild(document.getElementById('SomeID'+count));

answered Mar 14, 2011 at 22:18

stecb

14.8k3 gold badges53 silver badges69 bronze badges

3 Comments

lixcab Over a year ago

Thank you! Tried them both but I just can't get it to work. fieldsArea.removeChild(SomeID1) sure works but fieldsArea.removeChild(SomeID+count) wouldn't (maybe because it's a string and not a DOM) There has to be something else I'm doing wrong.

Felix Kling Over a year ago

@lixcab: fieldsArea.removeChild(SomeID1) cannot work unless SomeID1 is a variable containing a DOM element.

stecb Over a year ago

Both? just the second code snippet should work (fieldsArea.removeChild(document.getElementById('SomeID'+count)) :D ..btw, you could make an example on jsfiddle.net so we can easily check what's wrong with your code ;)

Collectives™ on Stack Overflow

Javascript removeChild array

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related