Need a "button" type element with an x at the top right that lets me delete the element it-CodePudding

I know this question sounds odd. Perhaps a button is not the element I'm looking for. What I want to to do is have an element that looks like what I have here:

Now this is technically a button. However, I'd like a small x to pop up in the top right corner when I hover this element so that I can delete the element itself. I have a feel a button is not the way to go here, but I do need an element with an onClick event.
Any pointers would be much appreciated

CodePudding user response：

You can set an onClick event on any HTML elements. You would probably want to add a separate element with the 'x' and listen for a click on there.

CodePudding user response：

We can certainly have a button element, add a span element inside (to show x), and only show that span on hover with some javascript, and styling it with css:

var btn = document.querySelector('.btn');
var close = document.querySelector('.close');

btn.addEventListener('mouseover', () => {
  close.style.display = 'block';

});

btn.addEventListener('mouseout', () => {
  close.style.display = 'none';

});

function closeIt(e) {
    btn.style.display = 'none';
}

body {
  background-color: #0f111d;
}

.btn {
  background-color: #50c4e5;
  padding: 10px;
  width: 400px;
  font-size: 15px;
  text-align: center;
  display: block;
  border-radius: 5px;
  border: 0;
  position: relative;
}

.close {
  cursor: pointer;
  display: none;
  position: absolute;
  top: 20%;
  right: 1%;
  transform: translate(0%, -50%);
}

<button  onclick="alert('button clicked')"><span onclick="event.stopPropagation();closeIt()" >&times;</span>https://www.pdga.com/frontpage/feed</button>