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

/*

我添加了＆＃34;添加更多＆＃34;我的表单上的按钮，它无限地附加一些HTML，PHP代码。我想添加＆＃34;取消＆＃34;按钮和相应的div或内容应删除。请告诉我如何删除或隐藏＆＃34;取消＆＃34;点击按钮。 * /

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();
        });
    });

想要添加＆＃34;取消＆＃34;按钮为＆＃34;添加更多＆＃34;

1 个答案: