Remove only 1 dynamic element in javascript

Question

I'm trying to create a form where you can add multiple input fields but also remove each one individually. This is what I got so far:

Html:

    <input type="hidden" value="1" id="theValue" />
<div class="form-horizontal vehicleclass0">
    <select class="vehicleclass" name="contact['Vehicle0']">
        <option value="" style="color: #cecece !important;">--Vehicle type--</option>
        <option value="Car">Car</option>
        <option value="Truck">Truck</option>
        <option value="Boat">Boat</option>
        <option value="Tractor">Tractor</option>
    </select>
    <input type="text" class="vehicleclass" name="contact[Make-Model Vehicle0]" placeholder="Make/Model" autocapitalize="off">
</div>
<div id="myDiv"></div>
<a href="javascript:;" onclick="addElement();"><div class="addvehiclewrapper" id="plus">Add another vehicle</div></a>

Javascript:

    function addElement() {

          var ni = document.getElementById('myDiv');

          var numi = document.getElementById('theValue');

          var num = (document.getElementById('theValue').value - 1) + 2;

          numi.value = num;

          var newdiv = document.createElement('div');

          var divIdName = 'Vehicle'+ num +'';

          newdiv.setAttribute('id', divIdName);

          newdiv.innerHTML = '<div class="form-horizontal"><select class="vehicleclass" name="contact[' + divIdName + ']"><option value="" style="color: #cecece !important;">--Vehicle type--</option><option value="Car">Car</option><option value="Truck">Truck</option><option value="Boat">Boat</option><option value="Tractor">Tractor</option></select><input type="text" class="vehicleclass" name="contact[Make-Model ' + divIdName + ']" placeholder="Make/Model" autocapitalize="off"></div> <a href="" onclick="javascript:removeElement('+ divIdName +'); return false">Remove ' + divIdName + '</a>';

          ni.appendChild(newdiv);

      }
function removeElement(divNum) {

  var d = document.getElementById('myDiv');

  var olddiv = document.getElementById(divNum);

  d.removeChild(olddiv);

}

Everything is working fine, except that when you click remove vehicle it removes all the added input fields at once. What needs to be changed to make it remove only the individual fields?

JS fiddle

Thanks for the replies, I removed spaces from the id and added a removeElement function.

It is still not working though. What is missing? Thank you so much

It's explained quite clearly [here](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html). — Ja͢ck, Mar 02 '15 at 02:53

jungy · Accepted Answer · 2015-03-02T02:50:24.457

1

You have no implementation for removeElement in your fiddle. It's not actually removing anything but, reloading the page since you're using an anchor tag <a>.

If you check your logs you should see Uncaught ReferenceError: removeElement is not defined.

Some other issues:

id can't have spaces like Vehicle 2
You need to add quotes when you pass a string to a function. For example, removeElement(Vehicle 2) isn't a valid string

edited Mar 02 '15 at 02:50

answered Mar 02 '15 at 02:38

jungy

2,512
1
15
17

Thank you for pointing that out. I've tried to add quotes to the string but somehow that won't work and I guess that's because it already uses quotes. as in: removeElement(''+ divIdName +'') – r0sili01 Mar 02 '15 at 03:24
@r0sili01 if you have to use them within that `string` escape the quotes using a `\'` – jungy Mar 02 '15 at 04:07

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

There is no such thing as "removeElement" function. Probably a JavaScript error makes your browser refresh, because it's on a link, and return false doesn't get run because of the error.

You should change your removal link into a button first, then fix the "removeElement" script like this.

edited May 23 '17 at 11:56

Community

1
1

answered Mar 02 '15 at 02:44

lorenzodarkside

136
2
4

Remove only 1 dynamic element in javascript

2 Answers2