0

I'm having trouble wrapping my head around this logic: I am succeeding in deleteRecipe to remove it's parents, but it is also supposed to fade in the undo button on top of it, that when clicked is supposed to fadeIn our sibling deleted Recipe. Attached is my code and If you want to see the entire code it's on fiddle:

HTML

<body>

<div class="mainContainer col-md-12 col-xs-12">

</div>

</body>

JS

var deleteRecipe = document.createElement('span');
deleteRecipe.setAttribute("class", "fa fa-times-circle", "aria-hidden", "true");
checkBoxes.appendChild(deleteRecipe);


$(deleteRecipe).click(function() {
  $(this).parents('.contentContainer').fadeOut();
  $(undoButton).fadeIn();
});

var undoContainer = document.createElement('div');
undoContainer.setAttribute("class", "col-md-12 col-xs-12 undoContainer");
mainContainer[0].appendChild(undoContainer);
var undoButton = document.createElement('span');
undoButton.setAttribute("class", "fa fa-undo", "aria-hidden", "true");
undoContainer.appendChild(undoButton);
$(undoButton).hide();

$(undoButton).click(function() {
  $(this).siblings().fadeIn();
  $(undoButton).fadeOut();
});
Milan Chheda
  • 8,159
  • 3
  • 20
  • 35
Dan With The Plan
  • 135
  • 2
  • 2
  • 12
  • 1
    You have multiple instances of the same IDs (`#undoContainer` and `#contentContainer`) in your generated markup. IDs must be unique in a document. Also, is there a reason why you are mixing native JS with jQuery? – Terry Aug 08 '17 at 14:04
  • So you are saying changing this to a class would fix it? It is mixed because it's a first mokup, I am planning on changing it entirely to react. just want to see that this will work first. – Dan With The Plan Aug 09 '17 at 07:17
  • That is likely not the only cause to your problems. It is still unclear to me what you're trying to do with your code... perhaps clarifying that in your question will help others. – Terry Aug 09 '17 at 07:18
  • Dude it worked! OMG i can't believe it was that simple. I feel so dumb. – Dan With The Plan Aug 09 '17 at 07:29
  • Glad that it worked :) – Terry Aug 09 '17 at 07:32
  • Hey @Terry , I was trying to have a close button and undo button. the close button fadeOut the content container and fadeIn the undoButton. The undoButton fadeIn the content container directly under it and then fadeOut the undoButton itself. – Dan With The Plan Aug 09 '17 at 07:35

0 Answers0