How to remove a nested div in HTML via child selector

Question

how can I select and remove the div shown in the picture with a red frame:

I dont get any jQuery selection correctly, in my opinion I need to find div with title = Heatmap, then navigate two divs up and delete the whole div - is this possible ?? Thanks !

Answer 1

If the element is always in that position within your .viz-controls-switchbar-switcher-container element, you can use:

$('.viz-controls-switchbar-switcher-container').children(':nth-child(5)').remove();

Otherwise yes, you can just:

$('[title="Heatmap"]').closest('.viz-controls-switchbar-switcher').remove();

Or:

$('[title="Heatmap"]').parents('.viz-controls-switchbar-switcher').remove();

Or:

$('[title="Heatmap"]').parent().parent().remove();

Or, if your element always has a style attribute stating with left: 73px;... you can use:

$('.viz-controls-switchbar-switcher[style^="left: 73px"]').remove();