![](/img/trans.png)
[英]How to find and remove the elem that match in two different arrays? Javascript
[英]jQuery how to use a remove elem to remove two text boxes
我正在編寫一個腳本,該腳本用於添加/刪除表單上的文本框。 這個想法是您輸入兩個數據塊,每個數據塊都需要一個文本框。 我想使用一個“刪除”按鈕刪除兩個框,但是我還不是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,如果有幫助的話
通常,您應該用div包圍要隱藏的內容-我們將其稱為div的id 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):
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.