Jay,
It is a little hard to explain and wrap your head around but here is my attempt.
.esri-layer-list__child-toggle + .esri-layer-list__item-label > .esri-layer-list__item-toggle {
display:none;
}
Selects all
.esri-layer-list__item-label
elements that are placed immediately after
.esri-layer-list__child-toggle
elements = x
Selects all
.esri-layer-list__item-toggle
elements where the parent is a x above.
Here is a sample that hides the eye when it is not a parent element with a radio button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>LayerList widget with actions - 4.10</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.esri-layer-list__child-toggle + .esri-layer-list__item-label:not([role="radio"]) > .esri-layer-list__item-toggle {
display:none;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GroupLayer",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList"
], function(
Map, MapView, GroupLayer, MapImageLayer, LayerList
) {
var USALayer = new MapImageLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
title: "US Sample Data"
});
var censusLayer = new MapImageLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
title: "US Sample Census",
visible: false
});
var demographicGroupLayer = new GroupLayer({
title: "US Demographics",
visible: true,
visibilityMode: "exclusive",
layers: [USALayer, censusLayer],
opacity: 0.75
});
var map = new Map({
basemap: "dark-gray",
layers: [demographicGroupLayer]
});
var view = new MapView({
center: [-98.5795, 39.8282],
zoom: 5,
container: "viewDiv",
map: map
});
function defineActions(event) {
var item = event.item;
if (item.title === "US Demographics") {
item.actionsSections = [
[{
title: "Go to full extent",
className: "esri-icon-zoom-out-fixed",
id: "full-extent"
}, {
title: "Layer information",
className: "esri-icon-description",
id: "information"
}],
[{
title: "Increase opacity",
className: "esri-icon-up",
id: "increase-opacity"
}, {
title: "Decrease opacity",
className: "esri-icon-down",
id: "decrease-opacity"
}]
];
}
}
view.when(function() {
var layerList = new LayerList({
view: view,
listItemCreatedFunction: defineActions
});
layerList.on("trigger-action", function(event) {
var visibleLayer = USALayer.visible ?
USALayer : censusLayer;
var id = event.action.id;
if (id === "full-extent") {
view.goTo(visibleLayer.fullExtent);
} else if (id === "information") {
window.open(visibleLayer.url);
} else if (id === "increase-opacity") {
if (demographicGroupLayer.opacity < 1) {
demographicGroupLayer.opacity += 0.25;
}
} else if (id === "decrease-opacity") {
if (demographicGroupLayer.opacity > 0) {
demographicGroupLayer.opacity -= 0.25;
}
}
});
view.ui.add(layerList, "top-right");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>