要在Javascript in循环中关闭的特定于目标的容器

我试图让我的关闭函数（deleteRecipe）

.fadeOut

包围它的容器，而不是底部容器（当前正在发生）。 关闭后，我希望能够单击deleteRecipe中的

撤消按钮
到
.fadeIn
什么是
.fadeOut

JavaScript

var main = function () {


var mainContainer = document.getElementsByClassName('mainContainer');
var backGroundPic = document.createElement("IMG");
backGroundPic.setAttribute("src", "../images/cutting_board.png");
backGroundPic.setAttribute("class","backgroundPic");
$('body').append(backGroundPic);


var recipeArray = ['drink', 'firstCourse', 'mainDish', 'dessert'];
var recipeArrayLength = recipeArray.length;
for (var i = 0; i < recipeArrayLength; i++) {

    var $container = $('#container');
    var $contentContainer = $('<div class="col-md-12 col-xs-12" id="contentContainer"></div>');
    $($container).append($contentContainer);

    var $checkBoxesContainer = $('<div class = "checkBoxesContainer"></div>');
    var $recipePicContainer = $('<span class = "recipePicContainer"></span> ');

    function makeRecipePic() {


        var $recipe = $('<IMG class="recipe">');
        $recipe.attr('src', '../images/grasshopper-cocktail.jpg');
        $($recipe).css('margin-top', '10px');
        $($recipePicContainer).append($recipe);
    }

    var $deleteRecipe = $('<span class="fa fa-times-circle aria-hidden true"></span>');
    $($checkBoxesContainer).append($deleteRecipe);


    $deleteRecipe.on('click', function () {
        $($contentContainer).fadeOut()
        $($undoButton).fadeIn()
    });

        //
        //$($deleteRecipe).click(function () {
        //    $(this).find(contentContainer).fadeOut();
        //    $($undoContainer).fadeIn();
        //});

    makeRecipePic();

    var $undoContainer = $('<div class="col-md-12 col-xs-12" id="undoContainer"></div>');
    $(mainContainer[0]).append($undoContainer);

    var $undoButton = $('<button class="fa fa-undo aria-hidden true"></buton>');
        $($undoContainer).append($undoButton);
        $($undoContainer).hide();



    $undoButton.on('click', function () {
        $($contentContainer).fadeIn();
        $($undoButton).fadeOut();
    });

    //$($undoButton).click(function(){
    //    $(contentContainer).fadeIn();
    //    $($undoContainer).fadeOut();
    //});

    $(mainContainer[0]).append($contentContainer);
    $($contentContainer).append($checkBoxesContainer);



    var $div = $('<div></div>');
    $div.innerHTML = 'CockTails';
    $($recipePicContainer).append($div);
    $($checkBoxesContainer).append($recipePicContainer);

    var $recipes = $('<ul class = "recipes"></ul>');
    //var checkboxes = document.getElementsByClassName('checkBoxes');

    var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");

    for (var j = 1; j <= 6; j++) {
        var li = document.createElement("li");
        li.className = "ingredients";
        li.setAttribute("type", "checkbox");


        var a = document.createElement("a");
        a.innerHTML = "Ingredient " + j;

        li.appendChild(a);
        $($recipes).append(li);
    }
    var b = document.createElement("li");
    li.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
    li.className = "Instructions";

    $($checkBoxesContainer[i]).append($recipes);
}
$($recipes).hide();
$('<input type="checkbox" value="1" />').prependTo(".ingredients");
$('.recipePicContainer').click(function () {
    $(this).next('ul').slideToggle("slow").toggleClass('selected');

});

};
$(document).ready(main);

var main=函数（）{
var mainContainer=document.getElementsByClassName（'mainContainer'）；
var backGroundPic=document.createElement（“IMG”）；
backGroundPic.setAttribute（“src”，“image/cutting_board.png”）；
backGroundPic.setAttribute（“类”、“backGroundPic”）；
$（'body'）。追加（backGroundPic）；
变量recipeArray=[“饮料”、“第一道菜”、“主菜”、“甜点”]；
var reciparray长度=reciparray.length；
对于（变量i=0；i）；
//var checkbox=document.getElementsByClassName（'checkbox'）；
var x=document.createElement（“输入”）；
x、 setAttribute（“类型”、“复选框”）；
对于（var j=1；j我要注意的几件事：

实际上，您可以通过jQuery创建元素，也可以使用jQuery在一个步骤中将这些元素保存在内存中，如下所示：

var $container = $('<div class="container"></div>')

你的html是什么？你能提供你页面的html吗？问题可能会发生，因为你正在淡出容器中的undobutton。所以整天都在围绕你的示例工作，但它不起作用。我可以给你发一个提琴吗？只需更新问题。也许在我之前会有其他人提供帮助。当你使用jQuery选择DOM节点时，你可以创建一个特殊的jQuery对象实例，它将具有jQuery可以执行的所有DOM操作方法。与其每次实例化一个新实例，不如使用您保存的变量：
var$element=$（'.element'）；$element.hide（）
，而不是像您那样再次包装它：
$（$element）
好吧，我有点从头开始，因为它真的坏了，但如果它能工作，我不介意再做一次
var $container = $('#container')
var $contentContainer = $('<div class="col-md-12 col-xs-12"></div>')
$container.append($contentContainer)

// ... same for checkboxes area
var $deleteRecipe = $('<span class="fa fa-times-circle"></span>')
var $undoButton = $('<button>Undo</button>')

$checkboxes.append($deleteRecipe)

$deleteRecipe.on('click', function () {
    $contentContainer.fadeOut()
    $undoButton.fadeIn()
})
$undoButton.on('click', function () {
    $contentContainer.fadeIn()
    $undoButton.fadeOut()
})