<p>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: <a href="https://caffeinecreations.ca/blog/editing-a-front-end-form-with-matrix/" rel="nofollow noreferrer">https://caffeinecreations.ca/blog/editing-a-front-end-form-with-matrix/</a></p>

CC BY-SA 4.0
2019-10-02T13:34:07.000Z
2019-10-02T13:34:07.000Z
Ian Ebden
<p>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.</p>

<p>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:</p>

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

<p>On my template I’ve got:</p>

<pre><code>&lt;input type="hidden" name="fields[{{ assessment.assessmentActionPlan }}][{{ block.id }}][type]" id="type-{{ block.id }}" value="failure"&gt;
&lt;input type="hidden" name="fields[{{ assessment.assessmentActionPlan }}][{{ block.id }}][enabled]" id="enabled-{{ block.id }}" value="1"&gt;
</code></pre>

<p>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.</p>

<matrix><entry-form>
Removing a matrix row via front end entry form
# Removing a matrix row via front end entry form

(Asked by: username_0 on 2019-09-26)

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:



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.

**Tags:** matrix, entry-form


---

## 1 answers

### Answer by username_0 on 2019-10-02. Score: 0 | Accepted answer

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/>


---

