文字列から配列の値を削除する方法

Question

###実現したいこと
下記➀から➁を削除し、➂を取得したいです。

###該当の箇所
➀[いぬ[の] しっぽ] [ねこのしっぽ]いぬ ねこ

➁Array [ "[いぬ[の] しっぽ]", "[ねこのしっぽ]" ]

↓取得したい

➂Array [ "いぬ", "ねこ" ]

###試したこと
jQueryを使い、配列➁をループし、その値（val）を➀から削除していく、というつもりで書いたのですが、➂の取得は実現できませんでした。

どなたか、良い方法がございましたらご教授願えませんでしょうか。

<input type="textarea" value="[いぬ[の] しっぽ] [ねこのしっぽ]いぬ ねこ ">

$('input').on('input', function() {
	
	// ➀入力値を取得
	let inputVal = $(this).val();
  
	// ➁削除する配列
	const rangeArr = [ "[いぬ[の] しっぽ]", "[ねこのしっぽ]" ];
	
	// ➂取得する配列
	let spaceArr = [];
	$(rangeArr).each(function(index, val) {
		spaceArr.push( inputVal.replace(val,'') );
	})
	console.log( spaceArr );
  
});

Answer 1

「[いぬ[の] しっぽ] [ねこのしっぽ]いぬ ねこ」から
「[いぬ[の] しっぽ]」と「[ねこのしっぽ]」を削除しても
「 いぬ ねこ」という文字列にしかなりません。（先頭の空白も微妙）
配列にする根拠が必要です。

var str="[いぬ[の] しっぽ] [ねこのしっぽ]いぬ ねこ";
var del= [ "[いぬ[の] しっぽ]", "[ねこのしっぽ]" ] 
del.forEach(function(x){
  str=str.replace(x,"");
});
console.log(str);
console.log(str.trim().split(" "));//無理やり解釈するならこう

Comments

[kamekamekame]

早速のご回答まことにありがとうございます。一晩中これに関係したことに取り組んでいてとても焦っていたので大変助かりました。感謝いたします。