Question

我正在编写一个脚本，用于在表单上添加/删除文本框。这个想法是你输入两个数据，每个数据都需要一个文本框。我想删除两个框＆＃34;删除＆＃34;按钮，但我还不是jQuery的专家。谢谢你的帮助！

HTML /脚本：

<form class="smart-green" method="POST" role="form" class="my-form" role="form" method="POST" >
     <table class="materialstab" style="border:1px solid;" cellpadding="5">
         <tr><td><p class="text-box"><label for="materials">Materials</label></p></td>
             <td><p class="text-box"><label for="url">URL</label><a class="add-box" href="#">Add Material</a></p></td></tr>
   </table>

   <script type="text/javascript">
     jQuery(document).ready(function() {
       $('.smart-green .add-box').click(function() { //add box on click
          var n = $('.text-box').length + 1;
          var box_html = $('<tr><td><p class="text-box"><input class="materials" type="text" name="materials'+ n +'" value="" id="materials' + n + '" /><a href="#" class="remove-box">Remove</a>/*ideally I would remove this remove <a> element*/</p></td><td><p class="text-box"> <input type="text" name="url' + n + '" value="" id="url' + n + '" /><a href="#" class="remove-box">Remove</a>/*this <a> would delete both text boxes*/</p></td></tr>'); // HTML for boxes

          box_html.hide();
          $('.smart-green .materialstab tr:last').after(box_html);
          box_html.fadeIn('slow');
          return false;
       });
       $('.smart-green').on('click', '.remove-box', function(){ //remove box
           $(this).parent().css( 'background-color', '#FF6C6C' );
           $(this).parent().fadeOut("slow", function() {
               $(this).remove();
               $('.box-number').each(function(index){
                   $(this).text( index + 1 );
               });
           });
           return false;
        });
     });
 </script>

我使用jQuery 3.1.1，如果这有帮助的话

Answer 1

一般情况下，你应该用div来包围你想要隐藏的任何内容 - 我们会调用这个div hide_div的id 当我有一个按钮点击事件隐藏的东西我使用这个代码

$('#id_of_remove_button').on('click',function() {
         $('#hide_div').css('display','none');
});

这样，如果您需要再次显示，可以.css('display','initial');

在div中包围它也很好，因为你只需要隐藏一个元素而不是一个一个。

如果您确实想要完全删除HTML：

$('#id_of_remove_button').on('click',function() {
         $('#hide_div').html(); // removes everything inside the div
});

Answer 2

就这样做（清理和修改jQuery）：

jQuery(document).ready(function() {
           $('.smart-green .add-box').click(function() { //add box on click
              var n = $('.text-box').length + 1;
              var box_html = $('<tr><td><p class="text-box"><input class="materials" type="text" name="materials'+ n +'" value="" id="materials' + n + '" /></p></td><td><p class="text-box"> <input type="text" name="url' + n + '" value="" id="url' + n + '" /><a href="#" class="remove-box">Remove</a></p></td></tr>'); // HTML for boxes
                                  
              box_html.hide();
              $('.smart-green .materialstab tr:last').after(box_html);
              box_html.fadeIn('slow');
              return false;
           });
           $('.smart-green').on('click', '.remove-box', function(){ //remove box
               $(this).parent().css( 'background-color', '#FF6C6C' );
               $(this).parent().fadeOut("slow", function() {
                   $(this).parents('tr').remove();
                   $('.box-number').each(function(index){
                       $(this).text( index + 1 );
                   });
               });
               return false;
            });
         });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="smart-green" method="POST" role="form" class="my-form" role="form" method="POST" >
     <table class="materialstab" style="border:1px solid;" cellpadding="5">
         <tr><td><p class="text-box"><label for="materials">Materials</label></p></td>
             <td><p class="text-box"><label for="url">URL</label><a class="add-box" href="#">Add Material</a></p></td></tr>
   </table></form>

jQuery如何使用删除elem删除两个文本框

2 个答案: