[SalesForce] lightning:datatable component – hiding Save and Cancel buttons after inline edit

This is just Locker Service working as designed. To stop malicious code from one component being able to scrape data from another component, Locker Service prevents access to the DOM elements of a component if you're trying access from a different namespace.

Data table is in the lightning namespace, so you'll never be allowed to get the DOM elements.

Read up on Locker Service here:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_code.htm

Then, go back to why you are trying to access the DOM, and figure out a more Lightning-ish way of doing it instead.

Forget emulating the data table with dynamic actions. Instead:

Controller

init : function(component, event, helper) {
    component.set('v.caseColumns', [
        {type: 'button-icon', typeAttributes: {name: 'addToCase', iconName: {fieldName: 'iconName'}, disabled: {fieldName: 'disabledValue'}, alternativeText: 'Add the Pet to the Case'}},
        {label: 'Pet Name', fieldName: 'linkName', type: 'url', typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
        {label: 'Type', fieldName: 'Type__c', type: 'text'},
        {label: 'Breed', fieldName: 'Breed__c', type: 'text'},
        {label: 'Age', fieldName: 'Age__c', type: 'number'},
        {label: 'Active', fieldName: 'Active__c', type: 'boolean'}
    ]);

    helper.runInitProcess(component);                   
},

handleRowAction : function(component, event, helper) {
    var row = event.getParam('row');
    helper.addToCase(component, row);
},

Helper

runInitProcess : function(component, event, helper){
    var action = component.get("c.getPets");
    action.setParams({
        recId: component.get("v.recordId")
    });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if(state === "SUCCESS") {
            var records = response.getReturnValue();
            records.forEach(function(record){
                record.linkName = '/'+record.Id;
            });
            component.set("v.petList", records);
            this.setActionIcons(component);             
        }else {
            var errors = response.getError();
            if (errors) {
                var arrayLength = errors.length;
                for (var i = 0; i < arrayLength; i++) {
                    console.log(i);
                }
            } else {
                console.log("Unknown error");
            }
        }
    });
},

addToCase : function (component, row) {
    var rows = component.get('v.petList');
    var rowIndex = rows.indexOf(row);
    var serverAction = component.get("c.addPetToCase"); 

    serverAction.setParams({
        recId: component.get("v.recordId"),
        petId : row.Id
    });
    serverAction.setCallback(this, function(response) {
        var state = response.getState();
        if(state === "SUCCESS") {
            this.changeActionIcons(component, row);
        }else {
            //Do Something
        }
    });
    $A.enqueueAction(serverAction);         
},  

changeActionIcons : function (component, row) {
    var data = component.get('v.petList');
    data = data.map(function(rowData) {
        if (rowData.Id === row.Id) {
            rowData.iconName = 'utility:check';
            rowData.disabledValue = true;
        } else {
            rowData.iconName = 'utility:add';
            rowData.disabledValue = false;
        }
        return rowData;
    });
    component.set("v.petList", data);
},

setActionIcons : function (component) {
    var data = component.get('v.petList');
    data = data.map(function(rowData) {
        if (rowData.Selected_Pet__c === true) {
            rowData.iconName = 'utility:check';
            rowData.disabledValue = true;
        } else {
            rowData.iconName = 'utility:add';
            rowData.disabledValue = false;
        }
        return rowData;
    });
    component.set("v.petList", data);
}

Result