Question

我想删除特定的克隆表单。

我有一个表和一个按钮，当你点击按钮时，它会克隆表，现在我想要删除之前克隆的特定表。

我正在尝试这样做，但它不起作用，我做错了什么？

感谢。

这是我的代码：

 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <html>
 <head>

<script type='text/javascript'>
   $(window).load(function(){

   $('.remove').click( function() {
     $(this).parents(".addforms:last").remove();
 event.preventDefault();
    });


  $('.clone').on('click', function(e){
  $(".addforms:last").clone().find("input[type='text']").val('').end().insertBefore($(".addforms:first"));
  event.preventDefault();
  }); 

});

</script>

</head>
 </body>
 <form class='cform' method="POST">
<table border='0' style='background: #1D7373; border-bottom: 1px solid #2e9c9c; color:white; width:100%;'>
    <tr class="addforms">
   <td><input class='txtedit' placeholder='Name' type='text'  name='Name' maxlength='130' /></td>

<td><a class="remove">[X]</a></td>
</tr>
         <input style='width: 60px;' type='submit' class='clone' value='+' />
    </table>
    </form>
    </body>
    </html>

Answer 1

您需要使用event delegation来处理窗口加载后添加的元素：

$("table").on("click", ".remove", function (e) {
    e.preventDefault();
    $(this).parents(".addforms:last").remove();
});

Answer 2

取代：

<input style='width: 60px;' type='submit' class='clone' value='+' />

使用此选项：输入时间更改为按钮

<input style='width: 60px;' type='button' class='clone' value='+' />

完整代码：

$(function () {

    $('.remove').click(function (event) {
        event.preventDefault();
        $(this).parents(".addforms:last").remove();

    });


    $('.clone').click(function () {
        $(".addforms:last").clone().find("input[type='text']").val('').end().insertBefore($(".addforms:first"));
    });

});

Live Demo

JQuery - 为什么我无法删除特定的克隆表单？

2 个答案: