前提・実現したいこと

ここに質問の内容を詳しく書いてください。
現在買い物リストアプリを作成しています。非同期での追加はできるようになりましたが、非同期での削除を行うことができません。
削除ボタンを押すとブラウザーに表示されているリストは消えますがリロードすると削除したところが復活してしまいます。また、コンソールにもエラーが表示されます。
問題・エラーが起きている画像をここにドラッグアンドドロップ。
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
1$(function(){
2//JavaScriptのdocumentにあたるのが、$（ドルマーク）です。$のあとにセレクタと呼ばれるHTMLの指定方法を記述することで、HTML要素が取得できます。	
3	function buildHTML(shopping){
4		let html =
5			`<div class="product-list">
6				<div class="product-name">
7					${shopping.name}
8				</div>
9				<div class="note">
10					${shopping.note}
11				</div>
12				<div class="date-addend">
13					${shopping.created_at}
14				</div>
15				<form action= "/shoppings/${shopping.id}" method="post" "shopping_path" >
16					<input type="hidden"  name="_method" value="delete" >
17					<input type="submit" name="commit" value="削除" class="delete-button" data-disable-with="削除">
18				</form>
19			</div>`
20		
21			//<form acttion= "${shopping.id}" accept-charset="UTF-8" method="post">
22						//<input type="submit" name="commit" value="削除" class="delete-button" data-disable-with="削除">
23					//</form>
24		return html;		
25	}
26	//フォームが送信されたら、イベントが発火するようにする
27	$('.form').on('submit', function(e){
28		//form要素のクラス属性が'.form'となっている。
29		//フォームの送信についてonメソッドでイベントをセッティングする際は、form要素自体に設定する.
30		e.preventDefault()
31		//preventDefault()を使用してデフォルトのイベントを止める。
32		let formData = new FormData(this);
33		//new FormData(フォーム要素)とすることでFormDataを作成できる。
34		let url = $(this).attr('action');
35		//ここで、urlを定義する。
36		//attrメソッドで要素が持つ指定属性の値を返す。actionを指定しており、属性の値を取得している。action属性にはフォームの送信先のurlの値が入っている。
37		//これでリクエスト先のURLを定義。
38		$.ajax({
39			url: url,
40			type: "POST",
41			data: formData,
42			dataType: 'json',
43			processData: false,
44    		contentType: false,
45		})
46		.done(function(data){
47			let html = buildHTML(data);
48			$('.main-list').append(html)
49			$('.form')[0].reset();      
50			$('.main-list').animate({ scrollTop: $('.main-list')[0].scrollHeight});
51			$('.product-button').prop('disabled', false);
52		})
53		.fail(function(){
54    	alert('error');
55		});	
56	});	
57
58	$(".product-list").on("click",function() {
59		$(this).remove();
60		let formData = new FormData(this);
61		let url = $(this).attr('action');
62		$.ajax({
63			url:url,
64			type: 'POST', 
65			data: formData,  
66			dataType: 'json',
67			processData: false,
68			contentType: false
69		})
70		.done(function(data){
71			let html = buildHTML(data);
72			$('.main-list').append(html)
73			$('.product-button').prop('disabled', false);
74		})		
75  	});
76});
77

#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

ruby
1class ShoppingsController < ApplicationController
2	def index
3		@shoppings = Shopping.all
4		@shopping = Shopping.new
5	end	
6
7	def create
8		@shopping = Shopping.create(shopping_params)
9		respond_to do |format|
10			format.html { redirect_to root_path }
11			format.json  
12		end
13	end	
14	
15	def destroy
16		shopping = Shopping.find(params[:id])
17		shopping.destroy
18		respond_to do |format|
19			format.html { redirect_to root_path }
20			format.json  
21		end
22	end	
23		
24	private 
25	def shopping_params
26		params.require(:shopping).permit(:name, :note)
27	end	
28end

###index.html.haml

ruby.header
1	.header-name
2		買い物リスト
3
4.main
5	.left-side
6
7	.main-list
8		- @shoppings.each do |shopping|
9			.product-list
10				.product-name
11					= shopping.name
12				.note
13					= shopping.note 
14				.date-addend
15					= shopping.created_at.strftime("%Y年%m月%d日 %H時%M分")
16				= form_with model:shopping, method: :delete, local: true do |f|
17					= f.submit '削除',class: 'delete-button'
18						
19	.right-side
20
21.footer
22	= form_with model: [@shopping], html: {class: "form"}, local: true do |f|
23		= f.text_field :name, class: 'product-name', 'placeholder': '商品名'
24		= f.text_field :note, class: 'product-note', 'placeholder': 'メモ'
25		= f.submit '追加', class: 'product-button'