Javascript remove button for each new input

Question

Check the code here: https://jsfiddle.net/20xzLdkL/

Pretty much I want to have an X button next to each new generated input that would delete the new created div.

You can see in the end of the <script> tags I tried something but it doesn't work.

Thank you.

var room = 1;
var wrapper = $(".testtt");

function add_fields() {
  room++;
  var objTo = document.getElementById('room_fileds')
  var divtest = document.createElement("div");
  divtest.innerHTML = '<div class="testtt"><div class="label">TEST ' + room + ':</div><div class="content"><span><p class="form-inline">Testing: <select class="form-control" name="test[]" style="width:70px;"> <option value="Test">TEst</option> </select> </span><span>Number: <input class="form-control" type="number" style="width:70px;" name="number[]" value="" /></p> <div class="testtt"><button id="delete">X</button></div></span></div><div>';

  objTo.appendChild(divtest)
}

$(wrapper).on("click", "#delete", function(e) {
  e.preventDefault();
  $(this).parent('div').remove();
  x--;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <button type="button" id="more_fields" class="btn btn-danger" onclick="add_fields();"><span class="glyphicon glyphicon-fire"></span> click me</button>
</div>


<div class="form-group">
  <div id="room_fileds">
    <div>
      <div class="content">
        <p class="form-inline">Test: <select class="form-control" name="test[]" style="width:70px;"> <option>Test1</option> </select>
          <span></span>Number: <input class="form-control" type="number" style="width:70px;" name="number[]" value="<?php print $test_stinga[1] ?>" />
        </p> 
        <br>
      </div>
  </div>
</div>

Please place all relevant code in the question, ideally in a working snippet. The HTML output would also be of much more use than the spaghetti PHP. If jsFiddle goes down your question will be unanswerable, and worthless for future visitors. — Rory McCrossan, Apr 25 '17 at 10:00
@freedomn-m Adding a new button each time wouldn't be a problem. I simply don't know how can I use javascript to delete the new created div when the button is pressed. — an4rei, Apr 25 '17 at 10:10
You clearly state *"I want to have an X button next to each new generated input"* - nothing about what that button should do. Give the button a class and add a delegated event handler. — freedomn-m, Apr 25 '17 at 10:11
@freedomn-m Well , thats why I posted the question here. I need help in creating that 'delegated event handler' because I literally don't know what you are talking about. — an4rei, Apr 25 '17 at 10:14
Ok, question was about how to add a button, now it's about event handlers on a button you've added... ideally you should ask a new question rather than change the existing one (but there's no answers yet, so I guess it's ok). If it's about handling events for a dynamically added button, then it's already answered here: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Apr 25 '17 at 10:32

score 0 · Accepted Answer · answered Apr 25 '17 at 10:27

Try

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <div class="form-group">
                          <button type="button" id="more_fields" class="btn btn-danger" onclick="add_fields();"><span class="glyphicon glyphicon-fire"></span> click me</button>
                      </div>


                      <div class="form-group">
                          <div id="room_fileds">
                              <div>
                                  <label>how the hell do i add a remove button for each new generated input?</label>
                                  <div class="content">

                                      <?php
                                      function not_empty_string($s) {
                                          return $s !== " ";
                                      }
                                      $pieces = array_filter(explode(",", $test_stingu),'not_empty_string');

                                      foreach ($pieces as $piece) {
                                          $test_stinga = array_filter(explode("-", $piece),'not_empty_string');
                                          // scoate spatiul de la inceputul stringului
                                          $test_stinga=preg_replace('/\s+/', '', $test_stinga);
                                         ?>
                                          
                                          <p class="form-inline">Test: <select class="form-control" name="test[]" style="width:70px;"> <option>Test1</option> </select>
                                          <span></span><span>Number: <input class="form-control" type="number" style="width:70px;" name="number[]" value="<?php print $test_stinga[1] ?>"/></span><button>
                                          Button
                                          </button>
                                          </p>

                                              <br>
                                      
<?php

                    
                                          }

                                          ?>


                                  </div>
                              </div>
                          </div></div>
                  <script>
                      var room = 1;
                      var wrapper         = $(".testtt");
                      function add_fields() {
                          room++;
                          var objTo = document.getElementById('room_fileds')
                          var divtest = document.createElement("div");
                          divtest.innerHTML = '<div class="testtt"><div class="label">TEST ' + room + ':</div><div class="content"><span><p class="form-inline">Testing: <select class="form-control" name="test[]" style="width:70px;"> <option value="Test">TEst</option> </select> </span><span>Number: <input class="form-control" type="number" style="width:70px;" name="number[]" value="" /><button class="remove">Remove</button></p></span></div><div>';

                          objTo.appendChild(divtest)
                      }

                      
                      
                      $('#room_fileds').on("click",".remove", function(e){
                     
                          $(this).parents().eq(5).remove();
                      })




                  </script>

Javascript remove button for each new input

1 Answers1