<p>I've managed to do this with:</p>

<pre><code>&lt;form method="post" accept-charset="UTF-8"&gt;
    {{ csrfInput() }}
    &lt;input type="hidden" name="action" value="users/save-user"&gt;
    &lt;input type="hidden" name="userId" value="{{ currentUser.id }}"&gt;
    {% include '_partial/wish-list-fields' %}

    &lt;input type="hidden" name="fields[userWishListMatrix][{{ block.id }}][type]" value="null"&gt;

    &lt;input type="submit" value="Remove"&gt;
&lt;/form&gt;
</code></pre>

<p>The <code>wish-list-fields</code> partial include hidden inputs showing all the fields already there. e.g.:</p>

<pre><code>&lt;input type="hidden" name="fields[userWishListMatrix][{{ block.id }}][fields][itemProperties][0][col1]" value="{{ row.property }}"&gt;
</code></pre>

<p>It repeats itself which I know doesn't seem terribly efficient but i dunno :-/ It works!</p>

<p>Please note, I'm on <a href="/questions/tagged/craft3" class="post-tag" title="show questions tagged &#39;craft3&#39;" rel="tag">craft3</a> so things may be a little different (although most likely just the <code>save-user</code> / <code>saveUser</code> action).</p>

CC BY-SA 3.0
2018-04-12T08:42:52.063Z
2018-04-12T08:42:52.063Z
ianp
<p>You can just add each matrix row data inside a  wrapper with an ID of matrix row:</p>

<pre><code>&lt;form id="some-custom-form" method="post" accept-charset="UTF-8" enctype="multipart/form-data"&gt;
    {{ csrfInput() }}
    {{ redirectInput('/where-you-need') }}
    {{ actionInput('users/save-user') }}
    {{ hiddenInput('userId', currentUser.id) }}

    {% for block in currentUser.anyMatrixFieldName%}
</code></pre>

<p>here the  wrapper with a matrix row id attribute:</p>

<pre><code>&lt;div id="{{ block.id}}"&gt;
        &lt;input type="hidden" name="fields[anyMatrixFieldName][{{ block.id}}][type]" value="item"&gt;
        &lt;input type="hidden" name="fields[anyMatrixFieldName][{{ block.id}}][enabled]" value="1"&gt;
        &lt;input type="hidden" name="fields[anyMatrixFieldName][{{ block.id }}][fields][time][time]" value="{{ block.time|date('H:i') }}"&gt;
&lt;/div&gt;

        &lt;a href="#" class="matrix-remove" data-matrix="{{ block.id }}"&gt;Remove&lt;/a&gt;
{% endfor %}
&lt;/form&gt;
</code></pre>

<p>Then jQuery code which will remove matrix row and will submit the form:</p>

<pre><code>    {% js at endBody %}
    $('.matrix-remove').click(function(event) {
      event.preventDefault();
      var matrixBlockId = '#' + $(this).attr('data-matrix');
      $(matrixBlockId).remove();
      $('#some-custom-form').submit();
    });
    {% endjs %}
</code></pre>

CC BY-SA 4.0
2020-04-18T13:13:27.193Z
2020-04-18T13:13:27.193Z
Nikolay Bronskiy
<p>Thanks to @ianp's answer, I was able to get the code below working.</p>
<p>This code deletes a single block entry from a matrix field through a front-end form. It's important to include the <code>[sortOrder]</code> array field in the form submission. This is how Craft knows which block entry to update/delete.</p>
<p><a href="https://craftcms.com/docs/4.x/matrix-fields.html#saving-matrix-fields" rel="nofollow noreferrer">This Craft doc page</a> is also very helpful when dealing with saving a front-end matrix field in general.</p>
<pre><code>{% for block in currentUser.matrixFieldName.all() %}

 &lt;form method=&quot;post&quot; accept-charset=&quot;UTF-8&quot;&gt;
  {{ csrfInput() }}
  {{ actionInput('users/save-user') }}
  {{ hiddenInput('userId', currentUser.id) }}
  {{ redirectInput(&quot;/account&quot;) }}
  {{ hiddenInput('fields[matrixFieldName][sortOrder][]', block.id) }}
  {{ hiddenInput('fields[matrixFieldName][block.id][type]', null) }}

  &lt;input type=&quot;submit&quot; value=&quot;Remove&quot; /&gt;
 &lt;/form&gt;

{% endfor %}
</code></pre>

CC BY-SA 4.0
2022-10-27T19:26:55.693Z
2022-10-28T19:06:55.947Z
2022-10-28T19:06:55.947Z
comtyler
<p>I created a user profile page with Matrix field with assets, I found <a href="https://craftcms.stackexchange.com/questions/1318/how-to-get-matrix-editor-into-frontend/1322#1322">this thread</a> and <a href="https://craftcms.stackexchange.com/questions/6551/how-to-update-matrix-field-on-frontend-for-user-profile">this thread</a> about adding and updating Matrix field in the frontend. Does anyone know how to delete the Matrix field? Moreover, I found that if I update Matrix field through the front end, it doesn't update the S3 bucket. Files are still stored in S3. Does anyone has a solution or give me a hint on delete/modify Matrix asset field? Thanks </p>

CC BY-SA 3.0
2017-05-16T15:44:02.440Z
Found [this thread](https://craftcms.stackexchange.com/questions/2013/how-do-you-delete-assets-from-a-frontend-form) about delete matrix is very useful.
Angela Chan
<assets><matrix>
How to delete Matrix fields in front end
# How to delete Matrix fields in front end

(Asked by: username_0 on 2017-05-05)

I created a user profile page with Matrix field with assets, I found [this thread](https://craftcms.stackexchange.com/questions/1318/how-to-get-matrix-editor-into-frontend/1322#1322) and [this thread](https://craftcms.stackexchange.com/questions/6551/how-to-update-matrix-field-on-frontend-for-user-profile) about adding and updating Matrix field in the frontend. Does anyone know how to delete the Matrix field? Moreover, I found that if I update Matrix field through the front end, it doesn't update the S3 bucket. Files are still stored in S3. Does anyone has a solution or give me a hint on delete/modify Matrix asset field? Thanks

**Tags:** assets, matrix

> **Comments:**
> **username_0**: Found [this thread](https://craftcms.stackexchange.com/questions/2013/how-do-you-delete-assets-from-a-frontend-form) about delete matrix is very useful.  

---

## 3 answers

### Answer by username_1 on 2018-04-12. Score: 2

I've managed to do this with:

    {{ csrfInput() }}
    
    
    {% include '_partial/wish-list-fields' %}

    

    


The wish-list-fields partial include hidden inputs showing all the fields already there. e.g.:


It repeats itself which I know doesn't seem terribly efficient but i dunno :-/ It works!
Please note, I'm on craft3 so things may be a little different (although most likely just the save-user / saveUser action).


---

### Answer by username_2 on 2020-04-18. Score: 1

You can just add each matrix row data inside a  wrapper with an ID of matrix row:

    {{ csrfInput() }}
    {{ redirectInput('/where-you-need') }}
    {{ actionInput('users/save-user') }}
    {{ hiddenInput('userId', currentUser.id) }}

    {% for block in currentUser.anyMatrixFieldName%}

here the  wrapper with a matrix row id attribute:

        
        
        


        Remove
{% endfor %}


Then jQuery code which will remove matrix row and will submit the form:
    {% js at endBody %}
    $('.matrix-remove').click(function(event) {
      event.preventDefault();
      var matrixBlockId = '#' + $(this).attr('data-matrix');
      $(matrixBlockId).remove();
      $('#some-custom-form').submit();
    });
    {% endjs %}


---

### Answer by username_3 on 2022-10-27. Score: 0

Thanks to @username_1's answer, I was able to get the code below working.
This code deletes a single block entry from a matrix field through a front-end form. It's important to include the [sortOrder] array field in the form submission. This is how Craft knows which block entry to update/delete.
This Craft doc page is also very helpful when dealing with saving a front-end matrix field in general.
{% for block in currentUser.matrixFieldName.all() %}

 
  {{ csrfInput() }}
  {{ actionInput('users/save-user') }}
  {{ hiddenInput('userId', currentUser.id) }}
  {{ redirectInput("/account") }}
  {{ hiddenInput('fields[matrixFieldName][sortOrder][]', block.id) }}
  {{ hiddenInput('fields[matrixFieldName][block.id][type]', null) }}

  
 

{% endfor %}


---

