带十字图标的容器
带十字图标的容器
提问于 2022-10-17 16:16:57
我有一个药丸按钮如下：
<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;
}在这个按钮里，我想让这个十字架在我的按钮交叉里。当用户单击此命令时，应将其从页面中删除。我怎么能这么做？
回答 3
Stack Overflow用户
发布于 2022-10-17 16: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>
Stack Overflow用户
发布于 2022-10-17 16: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>
Stack Overflow用户
发布于 2022-10-17 17: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">⊗</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">⊗</button>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74100220
复制相关文章
相似问题
腾讯云开发者
