Issue with CSS display property

Question

I need to show a remove button when something like the edit button is clicked and in normal cases I don't want to show it.

In the normal case, the remove button is not showing up, but when we go and place/hover the mouse on the position where that remove button is placed and click it(here we cant see a remove button), all that functionality is happening which will happen when button is clicked.

When i want to show the remove button,

<?php if($something){ ?>
<i class="fa fa-times-circle remove"
style="margin-left: 5px; margin-top: 5px;"  
onclick="function('parameter')"></i>
<?php } ?>

When I don't want to show the button,

<?php if($someOTHERthing){ ?>
<i class="fa fa-times-circle remove"
style="margin-left: 5px; margin-top: 5px;display: none"  
onclick="function('parameter')"></i>
<?php } ?>

and JavaScript code when edit button is clicked,

$('.remove').css('display', 'inline');

Answer 1

Just assign and remove the click handler using jQuery. It's cleaner than having it in your HTML anyway.

So when the edit button is clicked, you'll have:

$('.remove').css('display', 'inline');
$('.remove').on('click', function () { 
  // Your code here
});

And when the remove button should hide:

$('.remove').css('display', 'none');
$('.remove').off('click');