Search code examples
javascriptappendchildremovechild

remove specific field javascript


I have an form with some inputs. When i click on the + button, javascript create an input field. This is my form code:

 <div class="row">
        <div class="col-md-3">
            <div id="container">
            <div id="new" class="">
                <input type="number" name="number" id="number"> 
                <select class="form-control" id="sel1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                </div>
            </div>
        </div>
    </div>
    <button onClick="addNumber(); New();" class="btn btn-warning btn-md" type="button">+</button>

The + button create an new option and number field. This is the Javascript code for create new fields:

   function New()
  {
    var node = document.createElement("div");
    node.setAttribute("id", "new");
    node.setAttribute("class", addNumber());
    node.innerHTML = $("#new").html();
    document.getElementById("container").appendChild(node);
    $('#container').append(node);
}

This works good, but i want delete an specific field. When the new field create's, i want also when the delete button clicked, the field deleted. How can i do this?


Solution

  • now add delete icon with every div and on click pass id of that div to dlete function