Event click inside a tag that has another click event?

I am creating a label in the form of a bar that contains icons, this label has an associated click event that, when activated, shows me a detail. Now, the problem arises when I want to give an event click to the icon, which are contained within the mentioned tag and its event is not activated, but the event of the parent tag is activated.

I want to avoid moving the icon out of the tag and would like to know if there is a way to make your event active by ignoring the event of the tag that contains it.

This is my label with an event click which shows a detail in another part of the page:

<div class="bar-agent" onclick="show_detail_agent();">
    <p class="agent-data"></p>
    <span id="delete_agent" class="icon-delete">
        <img src="img/trash.png" alt="">
    </span>     
</div>

What I'm trying to do is access the event click of the span with id="delete_agent" to eliminate this tag. But being contained within the tag with class="bar-agent" does not let me access the span.

function _delete_agent(){
    $(".content-agents .bar-agent-content .bar-agent").on("click","#delete_agent", function(){
        console.log("aqui!");
    });
}