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

问题描述：

我在写一个脚本，用于添加/删除窗体上的文本框。这个想法是，你输入两个数据块，每个数据块都需要一个文本框。我想用一个“删除”按钮删除两个框，但我还不是jQuery的专家。感谢您的帮助！jQuery如何使用删除elem删除两个文本框

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如果在所有

所以选择行.... – epascarello

答

就做这样的（清理和修改的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>

答

帮助一般来说，你应该围绕什么是你要隐藏有一个div - 我们”会叫的这个ID的div hide_div 当我有一个按钮单击事件隐藏我使用此代码

$('#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 
});

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

相关推荐