Javascript 删除前如何保存节点列表的值？

当用户单击按钮时，我有一个可编辑的表。如果用户从表中删除一个单词，将出现一个对话框，要求用户确认。我想在删除之前以该模式显示已删除单词的值并显示它。目前，我的逻辑将所有值推送到数组中，但不推送到已删除的值中，如何实现这一点？这是我的尝试。我的html：

  <md-table md-card id="editable" contenteditable="false">
          <md-table-row>
            <md-table-head class="tabe-heading-bold editable">Permission</md-table-head>
            <md-table-head class="tabe-heading-bold editable">Super Admin</md-table-head>
            <md-table-head class="tabe-heading-bold editable">Org.Admin</md-table-head>
            <md-table-head class="tabe-heading-bold editable">Finance</md-table-head>
            <md-table-head class="tabe-heading-bold editable">Sales</md-table-head>
            <md-table-head class="tabe-heading-bold editable">Operations</md-table-head>
            <md-table-head class="tabe-heading-bold">Assesor</md-table-head>
          </md-table-row>

          <md-table-row>
            <md-table-cell class="table-group-heading"
              ><h5>Basic User</h5>
            </md-table-cell>
          </md-table-row>

          <md-table-row>
            <md-table-cell class="table-normal-text editable">Log in</md-table-cell>
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
          </md-table-row>

          <md-table-row>
            <md-table-cell class="table-normal-text editable"
              >Initiate Password recovery</md-table-cell
            >
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
            <md-table-cell>
              <div class="control-group">
                <label class="control control-checkbox action-span">
                  <input type="checkbox" checked="checked" />
                  <div class="control_indicator"></div>
                </label>
              </div>
            </md-table-cell>
          </md-table-row>

        </md-table>

许可
超级管理员
组织管理
财务
销售额
操作
资产
基本用户
登录
启动密码恢复

还有我的javascript：

 data() {
    return {
      showAddGroupDialog: false,
      updatePermissionDialog: false,
      itemsToBeDeleted: []
    }
  },
  methods: {
   edit() {
   if ($("#editable").attr("contenteditable") == "true") {
        $("#editable").attr("contenteditable", "false");
    } else {
        $("#editable").attr("contenteditable", "true");
     }
    },
   update() {
       if ($("#editable").attr("contenteditable") == "true") {
        $("#editable").attr("contenteditable", "false");
         var el =  document.querySelectorAll(".editable");
         for(let i = 0; i < el.length; i++) {
           var itemsToBeDeleted = el[i].textContent;
           this.itemsToBeDeleted.push(itemsToBeDeleted);
           if(el[i].textContent == "") {
             this.updatePermissionDialog = true;
             }
           }
         }
     } 
   }
  } 

data（）{
返回{
showAddGroupDialog:false，
updatePermissionDialog:false，
已删除的项目：[]
}
},
方法：{
编辑（）{
if（$（“#可编辑”）.attr（“可编辑内容”）=“true”）{
$（“#可编辑”）.attr（“内容可编辑”、“假”）；
}否则{
$（“#可编辑”）.attr（“内容可编辑”、“真实”）；
}
},
更新（）{
if（$（“#可编辑”）.attr（“可编辑内容”）=“true”）{
$（“#可编辑”）.attr（“内容可编辑”、“假”）；
var el=document.queryselectoral（“.editable”）；
for（设i=0；i

和我的模式，我应该在其中显示已删除的项目值：

 <md-dialog :md-active.sync="updatePermissionDialog" class="dialog">
        <div class="modal-container">
          <div class="closing-x">
            <span @click="updatePermissionDialog = false">X</span>
          </div>

          <md-dialog-title class="dialog-title"
            >You are about to delete</md-dialog-title
          >
          <div class="text-container">
            <p class="heading-p">Basic User permissions:</p>
            <br />
            <p class="smaller-text-p" v-for="item in itemsToBeDeleted" :key="item">{{item}}</p>
            <p class="smaller-text-p">- Log in</p>
          </div>
          <md-dialog-actions>
            <md-button
              class="add-group-button"
              @click="updatePermissionDialog = false"
              >Update Anyway</md-button
            >
          </md-dialog-actions>
        </div>
      </md-dialog>

X
您将要删除
基本用户权限：


{{item}
-登录
无论如何都要更新