How to delete Matrix fields in front end

Question

I created a user profile page with Matrix field with assets, I found this thread and this thread 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

Answer 1

I've managed to do this with:

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

    <input type="hidden" name="fields[userWishListMatrix][{{ block.id }}][type]" value="null">

    <input type="submit" value="Remove">
</form>

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

<input type="hidden" name="fields[userWishListMatrix][{{ block.id }}][fields][itemProperties][0][col1]" value="{{ row.property }}">

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 2

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

<form id="some-custom-form" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
    {{ 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:

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

        <a href="#" class="matrix-remove" data-matrix="{{ block.id }}">Remove</a>
{% endfor %}
</form>

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 %}