Wants to add "cancel" button for "Add more"

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')
        }

/*  

I have added "Add more" button on my form, which appends some HTML, PHP code infinitely. I want add "Cancel" button and the corresponding div or content should be removed. Please tell me how to remove or hide the "Cancel" clicked button. */

Answer 1

Here is a simple example:

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

in your scenario(you need delegate for added html) it will be something like this:

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