Prezados,
boa tarde!
Preciso de ajuda por favor: meu botão excluir não faz o que deveria fazer, ou seja, não exclui os cards.
No console, quando clico no X, ele retorna false para o comando:
console.log($this.classList.contains('.card_delete'));Seguem os demais códigos:
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>CEEP</title>
<link type="text/css" rel="stylesheet"
href="CSS/header.css">
<link type="text/css" rel="stylesheet" href="CSS/geral.css">
<link type="text/css" rel="stylesheet" href="CSS/base.css">
<link type="text/css" rel="stylesheet" href="CSS/card.css">
</head>
<body>
<header class="header container">
<h1 class="header-title">CEEP</h1>
<nav class="header-menu">
<ul>
<li class="header-button">
<a href="">Linhas</a>
</li>
<li class="header-button">
<a href="">?</a>
</li>
</ul>
</nav>
</header>
<section class="container">
<ol>
<li class="card" data-color="first">
<nav class="wrap-card-options">
<ul>
<li class="card-options card_delete">
<a href="">Excluir</a>
</li>
<li class="card-options isActive" data-color="first">
<a href="">Azul</a>
</li>
<li class="card-options"data-color="second">
<a href="">Vermelha</a>
</li>
<li class="card-options" data-color="third">
<a href="">Verde</a>
</li>
<li class="card-options" data-color="fourth">
<a href="">Amarela</a>
</li>
</ul>
</nav>
<p>
item de lista 1
</p>
</li><!--
--><li class="card" data-color="second">
<nav class="wrap-card-options">
<ul>
<li class="card-options card_delete">
<a href="">Excluir</a>
</li>
<li class="card-options" data-color="first">
<a href="">Azul</a>
</li>
<li class="card-options isActive" data-color="second">
<a href="">Vermelha</a>
</li>
<li class="card-options" data-color="third">
<a href="">Verde</a>
</li>
<li class="card-options" data-color="fourth">
<a href="">Amarela</a>
</li>
</ul>
</nav>
<p>
item de lista 2
</p>
</li><!--
--><li class="card" data-color="third">
<nav class="wrap-card-options">
<ul>
<li class="card-options card_delete">
<a href="">Excluir</a>
</li>
<li class="card-options" data-color="first">
<a href="">Azul</a>
</li>
<li class="card-options"data-color="second">
<a href="">Vermelha</a>
</li>
<li class="card-options isActive" data-color="third">
<a href="">Verde</a>
</li>
<li class="card-options" data-color="fourth">
<a href="">Amarela</a>
</li>
</ul>
</nav>
<p>
item de lista 3
</p>
</li><!--
--><li class="card" data-color="fourth">
<nav class="wrap-card-options">
<ul>
<li class="card-options card_delete">
<a href="">Excluir</a>
</li>
<li class="card-options" data-color="first">
<a href="">Azul</a>
</li>
<li class="card-options"data-color="second">
<a href="">Vermelha</a>
</li>
<li class="card-options" data-color="third">
<a href="">Verde</a>
</li>
<li class="card-options isActive" data-color="fourth">
<a href="">Amarela</a>
</li>
</ul>
</nav>
<p>
item de lista 4
</p>
</li>
</ol>
</section>
<script type="text/javascript" src="JS/card.js"></script>
</body>
</html>CSS
[data-color="first"] {
background-color: #45AAEE; /* Azul */
}
[data-color="second"] {
background-color: #FF1010; /* Vermelha */
}
[data-color="third"] {
background-color: #76EF40; /* Verde */
}
[data-color="fourth"] {
background-color: #EBEF40; /* Amarela */
}
.card {
display: inline-block;
box-sizing: border-box;
padding: 16px;
width: 25%;
position: relative;
}
.wrap-card-options {
position: absolute;
top: -16px;
left: 0px;
}
.card_delete {
background-color: white;
background-image: url(../images/X_solid_black_25.gif);
background-size: 65%;
background-repeat: no-repeat;
background-position: center;
}
.card-options {
display: inline-block;
box-sizing: border-box;
width: 32px;
height: 32px;
text-indent: -9999999px;
overflow: hidden;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.5);
}
.card-options.isActive {
border-width: 4px;
}JS
var $cards = document.querySelectorAll('.card');
var $cardColors = document.querySelectorAll('.card-options');
for (var idx = 0; idx < $cards.length; idx++) {
$cards[idx].addEventListener('click', function() {
var $this = event.target;
console.log($this.classList.contains('card-options'));
console.log("b");
var $card = this;
if ($this.dataset.color) {
$card.dataset.color = $this.dataset.color;
for (var i = 0; i < $cardColors.length; i++) {
$cardColors[i].classList.remove('isActive');
}
$this.classList.add('isActive');
};
console.log($this.classList.contains('.card_delete'));
if ($this.classList.contains('.card_delete')) {
console.log("a");
$card.remove();
};
});
};Se o texto aqui não ficou claro, os arquivos podem ser baixados aqui: https://www.dropbox.com/s/33sxrhqcqw6gooq/JS%20Avan%C3%A7ando.zip?dl=0
Desde já agradeço,
Ângelo
