Overview

This article introduces how to delete rows from a table using JavaScript. A Delete button is placed inside the record. Clicking the button deletes the row whose row number matches the specified value.

Initial Setup

This section describes building a Kintone App before deleting rows from a table.

Create a sample App

First, create a new Kintone App.

Alternatively, the sample App made in the Dynamically Add Rows to Tables article can be reused. In this case, update the Blank space field and add the Number fields listed below.

Set the fields in the sample App as follows.

Set the fields inside the Table field as follows.

Create sample data

Next, add a record, and enter three rows of sample data into the table as shown below:

Sample Code

Prepare the following JavaScript code in a text editor, and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

(() => {
  'use strict';

  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
    // Place the Delete button in the Space field
    const space = kintone.app.record.getSpaceElement('delete_contact');
    const deleteButton = document.createElement('button');
    deleteButton.innerHTML = 'Delete';
    deleteButton.onclick = deleteRow;
    space.appendChild(deleteButton);

    return event;
  });

  // Function to delete a row from the table
  const deleteRow = () => {
    const record = kintone.app.record.get().record;
    const targetRowNo = record.row_to_delete.value;
    record.contact_list.value.forEach((row, i) => {
      if (row.value.row_number.value === targetRowNo) {
        record.contact_list.value.splice(i, 1);
      }
    });
    resetRowNo(record);
    kintone.app.record.set({record: record});
  };

  // Function to reset the row numbers
  const resetRowNo = (record) => {
    record.contact_list.value.forEach((row, i) => {
      row.value.row_number.value = i + 1;
    });
  };
})();

Save the settings and click Update App. Open a record and click the Edit record icon. A Delete button appears on the Space field.

Enter 2 in the Row to Delete field, and click the Delete button. The second row of the "Contact List" field is deleted, and the remaining rows are renumbered.

Code Explanation

This section explains the sample code above. The code consists of two parts: placing a button in the Space field and deleting a row from the table.

Create a Button in the Space Field

The app.record.create.show and app.record.edit.show events run when the Add record screen or Edit record screen is displayed. kintone.app.record.getSpaceElement('delete_contact') retrieves the Space element by its element ID, delete_contact. A button labeled Delete is created and appended to that element. The deleteRow function is assigned to the button's onclick event.

1
2
3
4
5

const space = kintone.app.record.getSpaceElement('delete_contact');
const deleteButton = document.createElement('button');
deleteButton.innerHTML = 'Delete';
deleteButton.onclick = deleteRow;
space.appendChild(deleteButton);

Delete a Row from the Table

The Table field is represented as an array. To delete a row, an element is removed from the array using splice().

Code to delete a row from a table

splice() takes two arguments:

• First argument: The index of the element to start from.
• Second argument: The number of elements to delete.

The following code deletes one row, starting from the second row.

1

record.contact_list.value.splice(1, 1);

Structure of the deleted row

The following diagram shows the structure of the record data. The row at index 1 is the row to be deleted.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

record
└── contact_list
    ├── type: SUBTABLE
    └── value:
        ├── 0
        └── 1  <-- Row to delete
            └── value:
                ├── row_number
                │   ├── type: NUMBER
                │   └── value: 2
                ├── contact_name
                │   ├── type: SINGLE_LINE_TEXT
                │   └── value: Noah Chen
                ├── email_address
                │   ├── type: LINK
                │   └── value: noah.chen@example.com
                └── mailing_list
                    ├── type: CHECK_BOX
                    └── value: [Product Updates]

How the sample code deletes a row

The code loops through the rows with forEach() and checks each row. The matching row is then deleted with splice().

Get the record and the row number to delete

kintone.app.record.get() retrieves the record data. The value of the Row to Delete field is stored in targetRowNo.

1
2

const record = kintone.app.record.get().record;
const targetRowNo = record.row_to_delete.value;

Loop with forEach() and delete the matching row with splice()

The row whose Row Number value matches the Row to Delete value is deleted.

1
2
3
4
5

record.contact_list.value.forEach((row, i) => {
  if (row.value.row_number.value === targetRowNo) {
    record.contact_list.value.splice(i, 1);
  }
});

Update the row numbers

1

resetRowNo(record);

After a row is deleted, the row numbers are no longer sequential. The resetRowNo function loops through the remaining rows and sets each Row Number value to its index plus one.

1
2
3
4
5

const resetRowNo = (record) => {
  record.contact_list.value.forEach((row, i) => {
    row.value.row_number.value = i + 1;
  });
};

Reflect the changes in the record

Finally, kintone.app.record.set() reflects the updated record data on the screen.

1

kintone.app.record.set({record: record});

Notes

To Delete Rows When the Record Is Saved

The row is deleted when the Delete button is clicked.
To delete a row when the record is saved instead, edit the table data in event.record during the app.record.create.submit or app.record.edit.submit event, and return the event object. The edited table data is then saved with the record.

To Delete All Rows in the Table

The Table field is an array, so emptying the array deletes all rows at once.

1
2
3

const record = kintone.app.record.get().record;
record.contact_list.value = [];
kintone.app.record.set({record: record});

Related Articles

• Tables and the Nested Data Structure
• Dynamically Add Rows to Tables
• Dynamically Update Rows of Tables
• Table Operations with REST API