CODEWITHSUNDEEP
javascriptjqueryhtml
Romain Jouin
Romain Jouin

Reputation: 4838

jQuery remove too many fields

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>

Upvotes: 1

Views: 189

Answers (3)

Sleek Geek
Sleek Geek

Reputation: 4686

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>

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

  • 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);

Upvotes: 1

2hamed
2hamed

Reputation: 9047

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>

Upvotes: 1

Related Questions