Question

我正在创建一个表单，用户可以一个接一个地添加字段。对于每个字段，我设置了一个＆＃34;删除＆＃34;按钮。每个字段都在一个表中，所以我给表中一个随机id，并将这个id传递给一个删除函数：$(random-id).remove()。

奇怪的是，jQuery正在删除用户创建的所有表，就好像没有考虑id一样

为什么会这样？

<!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>

Answer 1

Math.random()生成的浮点数小于1，对id无效。您可以使用全局变量来保持创建的行数。请注意，CSS ID不能以数字开头。因此，在将数字用作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>

Answer 2

不要使用Math.random，而是递增一个数字并创建ID，如：#tab_NN。
在表单元素中添加ID id=myForm
使用.on()

删除

在删除与按钮data-*属性匹配的表格时，也可以使用.add( this )删除该按钮（其中this保留所显示的按钮）

＆＃13;

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

＆＃13;

<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>

＆＃13;

上面的代码允许您对将来的标记进行更改，因为它会定位到特定ID，但以防您的DELETE按钮始终位于table 之后，而不是您可以执行此操作无需分配ID即可，只需使用.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);

Answer 3

为什么不通过执行以下操作来简化此操作。

$(".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删除太多字段

3 个答案: