Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-10-02T13:34:07.000Z
Answers.LastActivityDate: 2019-10-02T13:34:07.000Z
Answers.UserDisplayName: Ian Ebden
Body: <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>
  
Tags: <matrix><entry-form>
Title: Removing a matrix row via front end entry form
ThreadText: # 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:
  
  ```
  <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.
  
  **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/>
  
  
  ---
  
  