个人中心
gpt4 book ai didi

javascript - jQuery 删除太多字段

转载 作者：行者123 更新时间：2023-11-30 17:07:52 26 4
gpt4 key购买 nike

我正在创建一个表单，用户可以在其中一个接一个地添加字段。对于每个字段，我都设置了一个“删除”按钮。每个字段都在一个表中，所以我给表一个随机 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>

最佳答案

  • 不要使用 Math.random，而是增加一个数字并创建 ID，如:#tab_NN。
  • 为您的表单元素添加一个 ID id=myForm
  • 使用 .on()
    • 将点击事件委托(delegate)给动态生成的 delete 按钮
  • 在删除与按钮 data-* 属性匹配的表时，也使用 .add( this ) 删除按钮(其中 this停留在点击的按钮上)

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>

上面的代码允许您在未来的标记中进行更改，因为它针对特定的 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);

关于javascript - jQuery 删除太多字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27591732/

26 4 0
文章推荐： javascript - 通过单击相关选项卡渲染多个局部 View
文章推荐： Javascript 安全错误 : DOM Exception 18 while accessing cookies
文章推荐： javascript - 数字和单位的正则表达式
文章推荐： c# - ASP.NET Html.ListBoxFor 在页面加载时始终选择所有选项
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com