想要添加「添加更多」的「取消」按鈕

Question

/* 
HTML code 

<input type="button" value="Add more" id="another_job" onclick="add_more();"/> 

<input type="hidden" name="is_add_more" id="is_add_more" value="">  
*/ 

function add_more() 
     { 
      $("#add_more").append('<div id="remove_div" class="cancel_div"><div id="div_type_of_food" style="height:40px; margin-top: 30px;">'+ 
    '<div id="type_of_food_message" style="margin-right:747px;">'+ 
     '<label for="subject">Type of food</label>'+ 
    '</div>'+ 
    '<div id="manage_error_msg" style="margin-left:200px; margin-top:-20px;">'+ 
     '<select name="type_of_food[]" id="type_of_food">'+ 
      '<option value="">--Select type of food--</option>'+ 
      '<?php foreach($types_of_food as $row){?>'+ 
      '<option value="<?php echo $row->id; ?>"><?php echo $row->type_of_food; ?></option>'+    
      '<?php } ?>'+ 
     '</select>'+ 
    '</div>'+ 
'</div>'+ 


'<div id="div_item_menu" style="height:40px;">'+ 
    '<div id="item_menu_message" style="margin-right:753px;">'+ 
     '<label for="subject">Item menu</label>'+ 
    '</div>'+ 
    '<div id="manage_error_msg" style="margin-left:200px; margin-top:-20px;">'+  
     '<select name="item_menu[]" id="item_menu" style="width:155px;" >'+ 
      '<option value="">--Select item menu--</option>'+ 
      '<?php foreach($item_menu as $row1){?>'+ 
      '<option value="<?php echo $row1->id; ?>"><?php echo $row1->item_menu; ?></option>'+    
      '<?php } ?>'+ 
     '</select>'+ 
    '</div>'+ 
'</div>'+ 

'<div id="div_food_details" style="height:75px;">'+ 
    '<div id="food_details_message" style="margin-right:735px;">'+ 
     'Food details'+ 
    '</div>'+ 
    '<div id="manage_error_msg" style="margin-left:232px; margin-top:-20px;">'+ 
     '<textarea name="food_details[]"></textarea>'+ 
    '</div>'+ 
'</div>'+ 


'<div id="div_price_of_menu" style="height:40px;">'+ 
    '<div id="price_of_menu_message" style="margin-right:630px;">'+ 
     'Price of menu (per person)'+ 
    '</div>'+ 
    '<div id="manage_error_msg" style="margin-left:200px; margin-top:-20px;">'+ 
     '<input type="text" name="price_of_menu[]" />'+ 
    '</div>'+ 
'</div>'+ 
'<input type="button" value="Add more" onclick="add_more();"/>'+ 
'<input type="button" name="cancel_button[]" class="cncl" value="Cancel" id="another_can" onclick="cancel_add_more();"/>'+ 
'<input type="hidden" name="is_add_more" value=""> </div>'); 
     } 

/*'<input type="button" value="Cancel" id="another_can" onclick="cancel_add_more();"/>'+*/ 
function cancel_add_more(){ 


      $(this).remove('#remove_div') 
     } 

/* 

我在窗體上添加了「添加更多」按鈕，它可以無限添加一些HTML，PHP代碼。我想添加「取消」按鈕，相應的div或內容應該被刪除。 請告訴我如何刪除或隱藏「取消」點擊按鈕。 */

Answer 1

下面是一個簡單的例子：

HTML：

<div class="content"> 
    <div>many contents here....... </div> 
    <input type="button" value="cancel" class="btnCancel" /> 
</div> 

jQuery的：在您的方案

$(document).ready(function(){ 
    $('.btnCancel').on('click',function(e) { 
     $(this).closest('div.content').hide(); 
    }); 
}); 

demo live

（你需要委派添加HTML）它會是這樣的這個：

$(document).ready(function(){ 
     $("#add_more").on('click','.cncl',function(e) { 
      $(this).closest('div.cancel_div').hide(); 
     }); 
    });