jQuery如何使用刪除elem刪除兩個文本框

Question

我在寫一個腳本，用於添加/刪除窗體上的文本框。這個想法是，你輸入兩個數據塊，每個數據塊都需要一個文本框。我想用一個「刪除」按鈕刪除兩個框，但我還不是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

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

Answer 2

幫助一般來說，你應該圍繞什麼是你要隱藏有一個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 
});