简体   繁体   中英

jQuery how to use a remove elem to remove two text boxes

I'm writing a script that is used in order to add/remove text boxes on a form. The idea is that you input two data pieces, which each require a text box. I would like to remove both boxes with one "remove" button, but I'm not quite an expert in jQuery yet. Thank you for your help!

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

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

I'm using jQuery 3.1.1 if that helps at all

Generally, you should surround whatever it is you want to hide with a div - we'll call the id of this div hide_div When I have a button click event to hide something I use this code

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

This way if you need to display it again, you can just do .css('display','initial');

Also surrounding it in a div is nice because you only have to hide one element and not one by one.

If you actually want to remove the HTML completely:

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

Just do it like this (cleaned up and modified 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> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM