删除 a 中存在于 b Javascript 中的元素

如何解决删除 a 中存在于 b Javascript 中的元素

假设我有一个这样的数组 A：

<p style="margin: -5% 0;">
          <a id="myBtn" style="cursor: pointer;"><img src="someimages.jpg" /></a> pop up will appear upon clicking the image</p>
        <div id="myModal" class="modal">
          <!-- Modal content -->
          <div class="modal-content">
            <span class="close" onclick="testVids.pause();">&times;</span>
            <iframe id="testVids" controls src="https://www.youtube.com/embed/" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
        </div>

和数组B：

A: [{name: "Caitlyn",type: "Teacher"},{name: "John",type: "Student"},{name: "Rob",type: 
"Student"},{name: "Jessica",type: "Librarian"},{name: "Kevin",type: "Janitor"}]

我的期望是数组 B 中也在数组 A 中的元素将在数组 A 中删除：

B: [{name: "Rob",type: "Librarian"}]

我第一次使用包括以下内容：

A: [{name: "Caitlyn",type: "Janitor"}]

但是没有达到我想要的效果。 我也尝试过 lodash 的包含，但我只是尝试这样做，结果是错误的：

a.filter((item) => !b.includes(item));

我目前正在从 lodash 中查找。帮助将不胜感激。谢谢！