jQuery动态添加的元素无法删除

 // 添加菜单
            $('.add_meal').click(function () {
                console.log('111');
                var div = $('<div></div>');
                div.addClass('meal_div meal_hr');
                var img = $('<img>');
                img.attr('src', '__PUBLIC__/ins/img/icon.png');
                var input = $('<input>');
                input.attr('placeholder', '请输入菜名');
                input.addClass('meal_input');
                var button = $('<button></button>');
                button.addClass('delete_meal');
                button.text('移除');


                var meal = $('meal');
                $('#meal').append(div);
                
                div.append(img);
                div.append(input);
                div.append(button);

              //jQuery动态加载一次，最初页面加载时找不到这个方法。
                $('.delete_meal').click(function () {
                $(this).parent().remove();
            })
            })


            // 移除菜单
            $('.delete_meal').click(function () {
                $(this).parent().remove();
            })