删除的节点重新附加在表单元格中

Question

我有一个简单的要求，如果对表的特定行进行了特殊标记，则禁用所有操作按钮。当我调试时，我可以看到包含操作按钮的div正在从其父节点中删除。但是，一旦我从调试中恢复，它就会重新出现。这已经使我丧命了很长时间，请帮忙。 这是我的html：-

    <table class="all-event-list-table" id="eventList" cellspacing="12">
        <tr class="shadow-type-3" data-ng-repeat="event in records">
            <td>
                <p class="event-list-box fontStyle">{{event.eventName}}</p>
                <p class="event-list-box1 fontStyle">{{event.eventType.text}}</p>
                <div class="event-attrib-list-hover" data-ng-click="showAttributes($index)">Event Attribute</div>
                <div class="event-list-control">
                    <button class="event-action-btn" data-ng-click="editEvent($index)">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="event-action-btn" data-ng-click="confimDelete($index)">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
            </td>
        </tr>
    </table>

我在$watch上添加了records，这是脚本：-

    $scope.$watch(function() {
        return $scope.records;
    }, function() {
        $scope.removeActionForSpecial();
    })
    $scope.removeActionForSpecial = function() {
        var table = angular.element(document.querySelector("#eventList"))[0];
        var rows = angular.element(table.getElementsByTagName("tr"));
        if(rows.length == 0) {
            return;
        }
        for(var i = 0; i < $scope.records.length; i++) {
            var record = $scope.records[i];
            if(record.isSpecial == 1) {
                //remove buttons
                var tdOfRow = angular.element(rows[i].getElementsByTagName("td"))[0];
                var actionDiv = angular.element(tdOfRow.getElementsByTagName("div"))[1];
                actionDiv.parentNode.removeChild(actionDiv);
            }
        }
    }