削除ボタン非同期

解決したいこと

非同期で削除ボタンを押せるようにしたいです

発生している問題・エラー

削除ボタンを押すと非同期で消えますが、リロードを押すと戻ってしまします。
出ているエラーメッセージを入力

または、問題・エラーが起きている画像をここにドラッグアンドドロップ。
https://i.gyazo.com/4766d0b4c627e834ebe5db0ce6df7e51.png
動画　
https://i.gyazo.com/9af2c604873ebddf171e459e6279fc14.mp4

該当するソースコード

ソースコードを入力
```shopping.self-021b89f4c047630c99e17566cb93208d49fd6acb78ad1d1e3da49f4936dbbd44.js?body=1:60 Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
    at HTMLDivElement.<anonymous> (shopping.self-021b89f4c047630c99e17566cb93208d49fd6acb78ad1d1e3da49f4936dbbd44.js?body=1:60)
    at HTMLDivElement.dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227)
    at HTMLDivElement.elemData.handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879)
(anonymous) @ shopping.self-021b89f4c047630c99e17566cb93208d49fd6acb78ad1d1e3da49f4936dbbd44.js?body=1:60
dispatch @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227
elemData.handle @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879

localhost/:1 Form submission canceled because the form is not connected

# shopping.js
``` JavaScript 
$(function(){
//JavaScriptのdocumentにあたるのが、$（ドルマーク）です。$のあとにセレクタと呼ばれるHTMLの指定方法を記述することで、HTML要素が取得できます。 
    function buildHTML(shopping){
        let html =
            `<div class="product-list">
                <div class="product-name">
                    ${shopping.name}
                </div>
                <div class="note">
                    ${shopping.note}
                </div>
                <div class="date-addend">
                    ${shopping.created_at}
                </div>
                <form action= "/shoppings/${shopping.id}" method="post" "shopping_path" >
                    <input type="hidden"  name="_method" value="delete" >
                    <input type="submit" name="commit" value="削除" class="delete-button" data-disable-with="削除">
                </form>
            </div>`

            //<form acttion= "${shopping.id}" accept-charset="UTF-8" method="post">
                        //<input type="submit" name="commit" value="削除" class="delete-button" data-disable-with="削除">
                    //</form>
        return html;        
    }
    //フォームが送信されたら、イベントが発火するようにする
    $('.form').on('submit', function(e){
        //form要素のクラス属性が'.form'となっている。
        //フォームの送信についてonメソッドでイベントをセッティングする際は、form要素自体に設定する.
        e.preventDefault()
        //preventDefault()を使用してデフォルトのイベントを止める。
        let formData = new FormData(this);
        //new FormData(フォーム要素)とすることでFormDataを作成できる。
        let url = $(this).attr('action');
        //ここで、urlを定義する。
        //attrメソッドで要素が持つ指定属性の値を返す。actionを指定しており、属性の値を取得している。action属性にはフォームの送信先のurlの値が入っている。
        //これでリクエスト先のURLを定義。
        $.ajax({
            url: url,
            type: "POST",
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
        })
        .done(function(data){
            let html = buildHTML(data);
            $('.main-list').append(html)
            $('.form')[0].reset();      
            $('.main-list').animate({ scrollTop: $('.main-list')[0].scrollHeight});
            $('.product-button').prop('disabled', false);
        })
        .fail(function(){
        alert('error');
        }); 
    }); 

    $(".product-list").on("click",function() {
        $(this).remove();
        let formData = new FormData(this);
        let url = $(this).attr('action');
        $.ajax({
            url:url,
            type: 'POST', 
            data: formData,  
            dataType: 'json',
            processData: false,
            contentType: false
        })
        .done(function(data){
            let html = buildHTML(data);
            $('.main-list').append(html)
            $('.product-button').prop('disabled', false);
        })      
    });
});

routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root to: 'shoppings#index'
  resources :shoppings,only: [:index, :new, :create, :destroy]
end

ShoppingsController

class ShoppingsController < ApplicationController
    def index
        @shoppings = Shopping.all
        @shopping = Shopping.new
    end 

    def create
        @shopping = Shopping.create(shopping_params)
        respond_to do |format|
            format.html { redirect_to root_path }
            format.json  
        end
    end 

    def destroy
        shopping = Shopping.find(params[:id])
        shopping.destroy
        respond_to do |format|
            format.html { redirect_to root_path }
            format.json  
        end
    end 

    private 
    def shopping_params
        params.require(:shopping).permit(:name, :note)
    end 
end

index.html.haml

ruby.header

    .header-name
        買い物リスト

.main
    .left-side

    .main-list
        - @shoppings.each do |shopping|
            .product-list
                .product-name
                    = shopping.name
                .note
                    = shopping.note 
                .date-addend
                    = shopping.created_at.strftime("%Y年%m月%d日 %H時%M分")
                = form_with model:shopping, method: :delete, local: true do |f|
                    = f.submit '削除',class: 'delete-button'

    .right-side

.footer
    = form_with model: [@shopping], html: {class: "form"}, local: true do |f|
        = f.text_field :name, class: 'product-name', 'placeholder': '商品名'
        = f.text_field :note, class: 'product-note', 'placeholder': 'メモ'
        = f.submit '追加', class: 'product-button'```

自分で試したこと

removeを使用してDOMの要素は消せていますが、リクエストがサーバーにうまくやりとりがいっておらず、リロードすると戻ってしまいます。ajaxを記述しましたがエラーがおきてしまい、検索し実装しましたが対処がわからず質問させて頂きました。ご回答頂けると幸いです。