title: Updating the DOM with new edited text without updating the backend of the single page application
body: <p>I am trying to create a single page application for keeping recipes and ingredients together. A user creates a recipe and under the recipe they can create ingredients and then click a button to bring up a form to edit the ingredients. For some reason when I use the edit button the original data is still there and the edit is appended to the front of it. How do I erase the original so that only the edit is showing up on the DOM? I don't want to replace on the server I just want to update the front end to display the new data to the user. Code and git repos are below.</p>
  <pre><code>  
      constructor(ingredient) {
          this.recipe_id = ingredient.recipe_id
          this.name = ingredient.name
          this.id = ingredient.id
          
      }
  
      static createIngredient(e){
          e.preventDefault()
          const ingredientInput = e.target.children[0].value
          const ingredientList = e.target.nextElementSibling
          const recipeId = e.target.parentElement.dataset.id
  
          Ingredient.submitIngredient(ingredientInput, ingredientList, recipeId)
  
          e.target.reset()
      }
  
      renderIngredient(ingredientList){
          const li = document.createElement('li')
          li.dataset.id = this.recipe_id
          li.innerText = this.name
        
          const deleteBtn = document.createElement('button')
          deleteBtn.addEventListener(&quot;click&quot;, this.deleteIngredient)
          deleteBtn.innerText = &quot;X&quot;
          li.appendChild(deleteBtn)
          ingredientList.appendChild(li)
  
          const editBtn = document.createElement('button')
          editBtn.addEventListener(&quot;click&quot;, this.editIngredient.bind(this))
          editBtn.innerText = &quot;Edit&quot;
          li.appendChild(editBtn)
          ingredientList.appendChild(li)
  
  
      }
      
      static submitIngredient(ingredient, ingredientList, recipeId){
          fetch(ingredientUrl, {
              method: &quot;POST&quot;,
              headers: {
                  &quot;Content-type&quot;: &quot;application/json&quot;,
                  &quot;Accept&quot;: &quot;application/json&quot;
              },
              body: JSON.stringify({
                  name: ingredient, 
                  recipe_id: recipeId
              })
          }).then(res =&gt; res.json())
          .then(ingredient =&gt; {
              let newIngredient = new Ingredient(ingredient)
              newIngredient.renderIngredient(ingredientList)
          })
      }
  
      
      deleteIngredient(){
          const ingredientId = this.parentElement.dataset.id
          fetch(`${recipeUrl}/${ingredientId}`, {
              method: &quot;DELETE&quot;
          })
          this.parentElement.remove()
      }
     
      
     
      
      editIngredient(){
          const editForm = document.createElement(&quot;form&quot;)
          editForm.id = &quot;edit-form&quot;
          const editInput = document.createElement(&quot;input&quot;)
          editInput.id = &quot;edit-input&quot;
          
          const editBtn = document.createElement('button')
          editBtn.innerText = &quot;Submit&quot;
          editForm.addEventListener(&quot;submit&quot;, this.updateIngredient)
          editForm.append(editInput, editBtn)
          event.target.parentElement.appendChild(editForm)
  
          
      }
      
       updateIngredient(){
      event.preventDefault()
      let newName = document.getElementById('edit-input').value;
      event.target.parentElement.innerHTML = event.target.parentElement.innerHTML.replace(this.name, newName);
      this.name = newName;
      document.getElementById('edit-form').outerHTML = &quot;&quot;
  </code></pre>
  <p><a href="https://github.com/MisterAnthropy/recipe-app-frontend" rel="nofollow noreferrer">https://github.com/MisterAnthropy/recipe-app-frontend</a>
  <a href="https://github.com/MisterAnthropy/recipe-app-backend" rel="nofollow noreferrer">https://github.com/MisterAnthropy/recipe-app-backend</a></p>