diff --git a/resources/js/components/ajax-delete-row.js b/resources/js/components/ajax-delete-row.ts
similarity index 65%
rename from resources/js/components/ajax-delete-row.js
rename to resources/js/components/ajax-delete-row.ts
index 6ed3deedf4d..4c7942a9e36 100644
--- a/resources/js/components/ajax-delete-row.js
+++ b/resources/js/components/ajax-delete-row.ts
@@ -1,12 +1,16 @@
-import {onSelect} from '../services/dom.ts';
+import {onSelect} from '../services/dom';
 import {Component} from './component';
 
 export class AjaxDeleteRow extends Component {
 
+    protected row!: HTMLElement;
+    protected url!: string;
+    protected deleteButtons: HTMLElement[] = [];
+
     setup() {
         this.row = this.$el;
         this.url = this.$opts.url;
-        this.deleteButtons = this.$manyRefs.delete;
+        this.deleteButtons = this.$manyRefs.delete || [];
 
         onSelect(this.deleteButtons, this.runDelete.bind(this));
     }
@@ -21,8 +25,8 @@ export class AjaxDeleteRow extends Component {
             }
             this.row.remove();
         }).catch(() => {
-            this.row.style.opacity = null;
-            this.row.style.pointerEvents = null;
+            this.row.style.removeProperty('opacity');
+            this.row.style.removeProperty('pointer-events');
         });
     }
 
diff --git a/resources/js/components/component.js b/resources/js/components/component.js
index 654f41a9664..c23898bbcbb 100644
--- a/resources/js/components/component.js
+++ b/resources/js/components/component.js
@@ -8,20 +8,20 @@ export class Component {
 
     /**
      * The element that the component is registered upon.
-     * @type {Element}
+     * @type {HTMLElement}
      */
     $el = null;
 
     /**
      * Mapping of referenced elements within the component.
-     * @type {Object<string, Element>}
+     * @type {Object<string, HTMLElement>}
      */
     $refs = {};
 
     /**
      * Mapping of arrays of referenced elements within the component so multiple
      * references, sharing the same name, can be fetched.
-     * @type {Object<string, Element[]>}
+     * @type {Object<string, HTMLElement[]>}
      */
     $manyRefs = {};
 
diff --git a/resources/views/attachments/manager-list.blade.php b/resources/views/attachments/manager-list.blade.php
index 0e841a042f7..6314aa7b5d7 100644
--- a/resources/views/attachments/manager-list.blade.php
+++ b/resources/views/attachments/manager-list.blade.php
@@ -15,23 +15,27 @@ class="card drag-card">
                         option:event-emit-select:name="insert"
                         type="button"
                         title="{{ trans('entities.attachments_insert_link') }}"
-                        class="drag-card-action text-center text-link">@icon('link')                 </button>
-                <button component="event-emit-select"
-                        option:event-emit-select:name="edit"
-                        option:event-emit-select:id="{{ $attachment->id }}"
-                        type="button"
-                        title="{{ trans('common.edit') }}"
-                        class="drag-card-action text-center text-link">@icon('edit')</button>
-                <div component="dropdown" class="flex-fill relative">
-                    <button refs="dropdown@toggle"
+                        class="drag-card-action text-center text-link">@icon('link')</button>
+                @if(userCan('attachment-update', $attachment))
+                    <button component="event-emit-select"
+                            option:event-emit-select:name="edit"
+                            option:event-emit-select:id="{{ $attachment->id }}"
                             type="button"
-                            title="{{ trans('common.delete') }}"
-                            class="drag-card-action text-center text-neg">@icon('close')</button>
-                    <div refs="dropdown@menu" class="dropdown-menu">
-                        <p class="text-neg small px-m mb-xs">{{ trans('entities.attachments_delete') }}</p>
-                        <button refs="ajax-delete-row@delete" type="button" class="text-link small delete text-item">{{ trans('common.confirm') }}</button>
+                            title="{{ trans('common.edit') }}"
+                            class="drag-card-action text-center text-link">@icon('edit')</button>
+                @endif
+                @if(userCan('attachment-delete', $attachment))
+                    <div component="dropdown" class="flex-fill relative">
+                        <button refs="dropdown@toggle"
+                                type="button"
+                                title="{{ trans('common.delete') }}"
+                                class="drag-card-action text-center text-neg">@icon('close')</button>
+                        <div refs="dropdown@menu" class="dropdown-menu">
+                            <p class="text-neg small px-m mb-xs">{{ trans('entities.attachments_delete') }}</p>
+                            <button refs="ajax-delete-row@delete" type="button" class="text-link small delete text-item">{{ trans('common.confirm') }}</button>
+                        </div>
                     </div>
-                </div>
+                @endif
             </div>
         </div>
     @endforeach
diff --git a/tests/Uploads/AttachmentTest.php b/tests/Uploads/AttachmentTest.php
index de448d93a4c..2eaf21d9c6f 100644
--- a/tests/Uploads/AttachmentTest.php
+++ b/tests/Uploads/AttachmentTest.php
@@ -267,6 +267,50 @@ public function test_data_and_js_links_cannot_be_attached_to_a_page()
         }
     }
 
+    public function test_attachment_delete_only_shows_with_permission()
+    {
+        $this->asAdmin();
+        $page = $this->entities->page();
+        $this->files->uploadAttachmentFile($this, 'upload_test.txt', $page->id);
+        $attachment = $page->attachments()->first();
+        $viewer = $this->users->viewer();
+
+        $this->permissions->grantUserRolePermissions($viewer, ['page-update-all', 'attachment-create-all']);
+
+        $resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
+        $html = $this->withHtml($resp);
+        $html->assertElementExists(".card[data-id=\"{$attachment->id}\"]");
+        $html->assertElementNotExists(".card[data-id=\"{$attachment->id}\"] button[title=\"Delete\"]");
+
+        $this->permissions->grantUserRolePermissions($viewer, ['attachment-delete-all']);
+
+        $resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
+        $html = $this->withHtml($resp);
+        $html->assertElementExists(".card[data-id=\"{$attachment->id}\"] button[title=\"Delete\"]");
+    }
+
+    public function test_attachment_edit_only_shows_with_permission()
+    {
+        $this->asAdmin();
+        $page = $this->entities->page();
+        $this->files->uploadAttachmentFile($this, 'upload_test.txt', $page->id);
+        $attachment = $page->attachments()->first();
+        $viewer = $this->users->viewer();
+
+        $this->permissions->grantUserRolePermissions($viewer, ['page-update-all', 'attachment-create-all']);
+
+        $resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
+        $html = $this->withHtml($resp);
+        $html->assertElementExists(".card[data-id=\"{$attachment->id}\"]");
+        $html->assertElementNotExists(".card[data-id=\"{$attachment->id}\"] button[title=\"Edit\"]");
+
+        $this->permissions->grantUserRolePermissions($viewer, ['attachment-update-all']);
+
+        $resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
+        $html = $this->withHtml($resp);
+        $html->assertElementExists(".card[data-id=\"{$attachment->id}\"] button[title=\"Edit\"]");
+    }
+
     public function test_file_access_with_open_query_param_provides_inline_response_with_correct_content_type()
     {
         $page = $this->entities->page();