I have a pill button as follows:

<button >Pill Button</button>
.button {
  border: 1px solid red;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

Inside this button I want to have this cross inside my button cross. When user clicks on this it should be removed from page. How can I do that?

CodePudding user response：

You can add a one more element inside this button and perform the click operation.

function closeBtn(){
 console.log('close btn');
 event.stopPropagation();
}
function btnClick(){
 console.log(' btn click')
}

.button {
  border: 1px solid red;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

<button onclick='btnClick()' >Pill Button <span onclick='closeBtn()'> close</span></button>

CodePudding user response：

If the button and x are to do the same thing, you just need to call remove.

const btns = document.querySelectorAll("[data-action='delete']");
btns.forEach(function(btn) {
  btn.addEventListener("click", function(evt) {
    const clickedElem = evt.target.closest('button');
    clickedElem.remove();
  });
});

[data-action="delete"]::after {
  padding-left: .3rem;
  content: '\2297';
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button"  data-action="delete">Something 2</button>
<button type="button"  data-action="delete">Something 2</button>

If you are wanting the X and the button to do two different actions, you would be better making it two different elements.

const groups = document.querySelectorAll(".btn-group");
groups.forEach(function (group) {
  group.addEventListener("click", function (evt) {
    const clickedElem = evt.target.closest('[data-action]');
    if(clickedElem.dataset.action === 'remove') {
      clickedElem.closest('.btn-group').remove();
    } else {
      console.log(clickedElem.textContent);
    }
  });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div  role="group" aria-label="Basic example">
  <button type="button"  data-action="details">Something 1</button>
  <button type="button"  data-action="remove">&otimes;</button>
</div>


<div  role="group" aria-label="Basic example">
  <button type="button"  data-action="details">Something 2</button>
  <button type="button"  data-action="remove">&otimes;</button>
</div>

CodePudding user response：

You can try something like this, to hide the X inside the button:

.button {
  border: 1px solid red;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
  display: block;
  max-width: 90px;
}

.button:after {
  content: "\271A";
  background: red;
  color: white;
  transform: rotate(45deg);
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 30px;
  top: 17px;
  left: 115px;
}

.two:after {
  content: none;
}

#undoer,
:target {
  display: none;
}

:target #undoer {
  display: block;
}

<a href="#start" id="start" >Pill button</a>
<a href="#stop" id="undoer" >Pill button</a>

To hide the entire button:

.button {
  border: 1px solid red;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
  display: block;
  max-width: 90px;
}

.button:after {
  content: "\271A";
  background: red;
  color: white;
  transform: rotate(45deg);
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 30px;
  top: 17px;
  left: 115px;
}

.button:target {
  display: none;
}

<a href="#start" id="start" >Pill button</a>