Add remove button for ingredient of a recipe

controllers/home.js

@@ -231,5 +231,31 @@ module.exports = {
                 console.log(err);
                 return res.render("error");
             });
+    },
+
+    deleteRecipeIngredient: function(req, res){
+        Recipe.findOne({_id: req.body.recipeId})
+            .populate("ingredients.id")
+            .then((recipe)=>{
+                for(let i = 0; i < recipe.ingredients.length; i++){
+                    if(recipe.ingredients[i]._id.toString() === req.body.ingredientId){
+                        recipe.ingredients.splice(i, 1);
+                        break;
+                    }
+                }
+
+                recipe.save()
+                    .then((recipe)=>{
+                        return res.json(recipe);
+                    })
+                    .catch((err)=>{
+                        console.log(err);
+                        return res.render("error");
+                    })
+            })
+            .catch((err)=>{
+                console.log(err);
+                return res.render("error");
+            });
     }
 }

routes.js

@@ -10,4 +10,5 @@ module.exports = function(app){
     app.post("/ingredients/remove", home.removeIngredient);
     app.post("/ingredients/createone", home.createIngredient);
     app.get("/recipes", home.displayRecipes);
+    app.post("/recipes/ingredients/remove", home.deleteRecipeIngredient);
 }

views/recipesPage/recipes.ejs

@@ -9,7 +9,7 @@
 
         <% include ../shared/banner %>
 
-        <h1>Recipes</h1>
+        <h1 id="title">Recipes</h1>
 
         <div id="recipes" class="container"></div>
 

views/recipesPage/recipes.js

@@ -26,10 +26,13 @@ let recipesPage = {
         }
     },
 
+    //Display a single recipe with all of its ingredients
     displayOneRecipe: function(recipe){
         let recipesDiv = document.querySelector("#recipes");
         let ingredientDiv = document.querySelector("#ingredient");
         let tbody = document.querySelector("tbody");
+        let title = document.querySelector("#title");
+        title.innerText = recipe.name;
 
         recipesDiv.style.display = "none";
         ingredientDiv.style.display = "flex";
@@ -51,14 +54,22 @@ let recipesPage = {
 
             let removeButton = document.createElement("button");
             removeButton.innerText = "Remove";
-            removeButton.onclick = ()=>{deleteIngredient(ingredient);};
+            removeButton.onclick = ()=>{this.deleteIngredient(recipe._id, ingredient._id, row);};
             actions.appendChild(removeButton);
-
         }
     },
 
-    deleteIngredient: function(ingredient){
+    deleteIngredient: function(recipeId, ingredientId, row){
+        row.parentNode.removeChild(row);
         
+        axios.post("/recipes/ingredients/remove", {recipeId: recipeId, ingredientId:ingredientId})
+            .then((result)=>{
+                banner.createNotification("Ingredient has been removed from recipe");
+            })
+            .catch((err)=>{
+                banner.createError("There was an error and the ingredient could not be removed from the recipe");
+                console.log(err);
+            });
     }
 }