问带十字图标的容器
EN

Stack Overflow用户

提问于 2022-10-17 08:16:57

回答 3查看 46关注 0票数 0

我有一个药丸按钮如下：

<button class="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;
}

在这个按钮里，我想让这个十字架在我的按钮交叉里。当用户单击此命令时，应将其从页面中删除。我怎么能这么做？

html

css

bootstrap-4

云点播特惠1元起

提供制作上传、存储、转码、媒体处理、媒体 AI、加速分发播放、版权保护等一体化的高品质媒体服务

回答 3

Stack Overflow用户

发布于 2022-10-17 08:31:02

您可以在此按钮中再添加一个元素并执行单击操作。

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()' class="button">Pill Button <span onclick='closeBtn()'> close</span></button>

票数 0

Stack Overflow用户

发布于 2022-10-17 08:45:43

您可以尝试这样的方法，将X隐藏在按钮中：

.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" class="button">Pill button</a>
<a href="#stop" id="undoer" class="button two">Pill button</a>

要隐藏整个按钮：

.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" class="button">Pill button</a>

票数 0

Stack Overflow用户

发布于 2022-10-17 09:01:32

如果按钮和x要做相同的事情，只需调用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/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-outline-danger" data-action="delete">Something 2</button>
<button type="button" class="btn btn-outline-danger" data-action="delete">Something 2</button>

如果您希望X和按钮执行两个不同的操作，则最好将其设置为两个不同的元素。

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/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary" data-action="details">Something 1</button>
  <button type="button" class="btn btn-outline-danger" data-action="remove">&otimes;</button>
</div>


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