JSFiddle - React, Tailwind, and code Playground

JavaScript

a = {
    "id": 1,
    "children": [
    {
        "id": 2,
        "children": {
            "id": 3,
            "children": {
                "id": 4,
                "children": ""
            }
        }
    },
    {
        "id": 2,
        "children": {
            "id": 3,
            "children": {
                "id": 4,
                "children": ""
            }
        }
    },
    {
        "id": 2,
        "children": {
            "id": 3,
            "children": {
                "id": 4,
                "children": ""
            }
        }
    },
    {
        "id": 2,
        "children": {
            "id": 3,
            "children": {
                "id": 4,
                "children": ""
            }
        }
    },
    {
        "id": 2,
        "children": {
            "id": 3,
            "children": {
                "id": 4,
                "children": ""
            }
        }
    },
    {
        "id": 2,
        "children": {
            "id": 3,
            "children": {
                "id": 4,
                "children": ""
            }
        }
    },
    {
        "id": 2,
        "children": {
            "id": 3,
            "children": {
                "id": 4,
                "children": ""
            }
        }
    }]
};

 function deleteEmpty(obj){
        for(var k in obj)
         if(k == "children"){
             if(obj[k]){
                     deleteEmpty(obj[k]);
             }else{
                   delete obj.children;
              } 
         }
    }

for(var i=0; i< a.children.length; i++){
 deleteEmpty(a.children[i])
}

console.log(a)