@dieie
Студент колледжа

Как реализовать закрывающий крестик в добавленом блоке?

Как сделать из вот этого "х" закрывающий крестик?
5d973dd71e009252471441.png
  • Вопрос задан
  • 131 просмотр
Решения вопроса 3
Mr_Sergo
@Mr_Sergo
https://codepen.io/Mr_Sergo/pen/OJJLqOE
<select id="secectorOne" onchange="addblock(this)">
    <option value="80">80см</option>
    <option value="90">90см</option>
    <option value="120">120см</option>
    <option value="140">140см</option>
    <option value="160">160см</option>
    <option value="180">180см</option>
</select>

<p>90см <span class="close">&times;</span></p>
<p>80см <span class="close">&times;</span></p>
<p>100см <span class="close">&times;</span></p>

function addblock(el) {
    var p = document.createElement("p");
    p.innerHTML = el.querySelectorAll("option")[el.selectedIndex].textContent + '<span class="close"> x </span>';
    el.parentNode.appendChild(p);
}

document.addEventListener('click',e => {
    if (e.target.className == 'close') {
        e.target.parentElement.remove();
    }
});
Ответ написан
Комментировать
hzzzzl
@hzzzzl
function addblock(el) {
  var p = document.createElement("p");
  var btn = document.createElement('button')
  btn.textContent = 'x'
  btn.addEventListener('click', (e) => { 
    const p = e.target.parentNode
    p.parentNode.removeChild(p)
  })
  p.textContent = el.querySelectorAll("option")[el.selectedIndex].textContent;
  p.appendChild(btn)
  el.parentNode.appendChild(p);
}
Ответ написан
Комментировать
@ZZiliST
Изучаю JS, CSS, HTML, PHP
function addblock(el) {
  var p = document.createElement("p");
  p.innerHTML =  el.querySelectorAll("option")[el.selectedIndex].textContent + "<span onclick='delblock(this);'> x </span>";
  el.parentNode.appendChild(p);
}

function delblock(el) {
 el.parentNode.remove();
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы