帶有十字圖示的容器

我有一個藥丸按鈕如下：

<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;
}

在這個按鈕里面，我想在我的按鈕里面有這個十字架cross。當用戶點擊它時，它應該從頁面中洗掉。我怎樣才能做到這一點？

uj5u.com熱心網友回復：

您可以在此按鈕內再添加一個元素并執行單擊操作。

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>

uj5u.com熱心網友回復：

如果 button 和 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/[email protected]/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/[email protected]/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>

uj5u.com熱心網友回復：

您可以嘗試這樣的操作，將 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>

標籤：htmlcss引导程序 4

上一篇：在同一新視窗中訪問多個鏈接

下一篇：我有一個ReactHookuseEffect缺少依賴項：