Removing a matrix row via front end entry form

Question

Read some similar posts on here but they don't quite solve my problem. I've gt an entry form with a matrix field in it, and I’m trying to make it editable via front end entry form. Specifically I'd like to be able to remove rows – either delete them, or disable them.

So my form has a ‘Remove’ button (Remove) on each row. Clicking the button should remove or disable the matrix row, save and reload the entry/page. Javascript isn’t my forte but here’s what I’ve got so far:

document.addEventListener('DOMContentLoaded', function () {
    function getAll(selector) {
        return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
    }
    var $removeBtn = getAll( '.remove' );
    if ($removeBtn.length > 0) {
        $removeBtn.forEach( function ( $e ) {
            $e.addEventListener('click', function () {
                var target = $e.dataset.target;
                document.getElementById( target ).value = null;
                $( '#failures' ).submit();
            });
        });
    }
});

On my template I’ve got:

<input type="hidden" name="fields[{{ assessment.assessmentActionPlan }}][{{ block.id }}][type]" id="type-{{ block.id }}" value="failure">
<input type="hidden" name="fields[{{ assessment.assessmentActionPlan }}][{{ block.id }}][enabled]" id="enabled-{{ block.id }}" value="1">

My script is correctly setting the enabled field value to null and submitting the form (#failures), but the matrix field on the entry remains unchanged. Where am I going wrong? Thanks for any help.

Answer 1

In the end I went with a slightly different approach, allowing users to remove multiple rows before submitting the form. Nod to this excellent article: https://caffeinecreations.ca/blog/editing-a-front-end-form-with-matrix/