jQuery remove too many fields

Question

I am creating a form where the user can add fields one after the other. For each field I am setting a "remove" button. Each field is in a table, so I give a random id to the table, and pass this id to a removing function doing: $(random-id).remove().

The strange thing is that jQuery is removing all of the tables created by the user, as if the id is not taken into account

Why that can be?

<!doctype html>
<html lang="en">

    <head>
      <meta charset="utf-8">
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">  
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

      <script>

        function delete_field(id)
        {
            $("#"+id+"").remove();
        }

        function add_form_field()
        {
            id = Math.random();
            html = '<table id='+id+'>\
                        <tr><td>Label           </td></tr>\
                    </table>\
                    \
                    <button onclick=delete_field('+id+')>remove</button>';

            $("form").append(html);
        }

        </script>
    </head>
    <body>
        <form>
        </form>
        <button onclick=add_form_field()>   Add a field </button>
    </body>
</html>

http://stackoverflow.com/questions/7987636/why-cant-i-have-a-numeric-value-as-the-id-of-an-element — vch, Dec 21 '14 at 17:15
@TobyAllen you beat me to the punch.. That was my question exactly — blurfus, Dec 21 '14 at 17:15
@user3318273 The `type` [is an attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) you can add within the `html` string -- ` — Jonathan Lonowski, Dec 21 '14 at 17:33

score 1 · Answer 1 · answered Dec 21 '14 at 17:20

Math.random() produces a floating point number less than 1 which is invalid for an id. You can use a global variable to keep count of the rows created. Keep in mind that a CSS ID can not start with a digit. So append the number to a string before using it as an ID.

<script>

        function delete_field(id)
        {
            $("#"+id+"").remove();
        }
        tableID = 1;
        function add_form_field()
        {
            id = 'table-'+tableID;
            html = '<table id='+id+'>\
                        <tr><td>Label           </td></tr>\
                    </table>\
                    \
                    <button onclick=delete_field('+id+')>remove</button>';

            $("form").append(html);
            tableID++;
        }

        </script>

Roko C. Buljan · Accepted Answer · 2014-12-21T17:38:34.793

Don't use Math.random, rather increment a number and create ID like: #tab_NN.
Add an ID to your Form Element id=myForm
Delegate click events to dynamically generated delete buttons using .on()
While removing the table that matched the button data-* attribute, delete the button too using .add( this ) (where this stays for the clicked button)

var id = 0;

function delete_field(event){
  event.preventDefault();
  $("#tab_"+ $(this).data("remove")).add(this).remove();
}

function add_form_field(){
  id += 1;
  var html = '<table id="tab_'+ id +'">'+
      '<tr><td>Label</td></tr>'+
      '</table>'+
      '<button data-remove="'+id+'" class="remove">remove</button>';

  $("#myForm").append(html);
}

$('#addField').on('click', add_form_field);
$('#myForm').on('click', '.remove', delete_field);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm"></form>
 <button id="addField">   Add a field </button>

The code above allows you to have changes in the future markup cause it targets a specific ID, but in case your DELETE buttons will always be exactly after table than you can do it without assigning ID's, by simply using .prev("table"):

http://jsbin.com/wuqati/1/edit

function delete_field(event){
  event.preventDefault();
  $(this).prev("table").add(this).remove();
}

function add_form_field(){
  var html = '<table>'+
      '<tr><td>Label</td></tr>'+
      '</table>'+
      '<button class="remove">remove</button>';

  $("#myForm").append(html);
}

$('#addField').on('click', add_form_field);
$('#myForm').on('click', '.remove', delete_field);

There are some minors mistakes in the code but globally it gee me the good way to made the work :) — Romain Jouin, Dec 21 '14 at 17:52
But how can I catch an onclick event on a submit button now ? — Romain Jouin, Dec 21 '14 at 18:34

Sleek Geek · Answer 3 · 2014-12-21T18:40:04.947

Why not simplify this by doing something like below.

$(".remover").click(function() {
    $(this).parent().remove();
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
       <td> 
        <input type="text" placeholder="input One"/> <input type="button" class="remover" value="remove" />
        </td> </tr>
    
  <tr>
       <td> 
        <input type="text" placeholder="input Two"/> <input type="button" class="remover" value="remove" />
        </td> </tr>
    
      <tr>
       <td> 
        <input type="text" placeholder="input Three"/> <input type="button" class="remover" value="remove" />
        </td> </tr>
    
    </table>

jQuery remove too many fields

3 Answers3