Excluir linha da tabela com Javascript

HTML

CSS

JavaScript

16/10/2019

Olá sou iniciante, preciso de ajuda em um projeto de estudo de um sistema de estacionamento, estou com dificuldade em criar um botão de excluir em minha tabela, o botão acaba excluindo a tabela inteira, quero que ele delete somente a linha do botão, alguma dica? segue meu código

<!DOCTYPE html>
<html>
<head>
<title>Piloto 1</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<style>
.vagas_letras { background-color: gray;

}

.vagas_n { background-color: gray;

}
</style>

<body>
<form action="">
Cliente:<br>
<input type="text" id="cliente" placeholder="Nome do cliente"><br>
Modelo:<br>
<input type="text" id="modelo" placeholder="Modelo do veículo"><br>
Placa:<br>
<input type="text" id="placa" placeholder="ABC-1234"><br>
Vaga:<br>
<input type="text" id="vaga" placeholder="Z1"><br>
<input type="button" id="botao" value="Confirmar" onclick="adicionar()">

</form>
<br>
<table>
<thead>
<tr>
<td>Cliente</td>
<td>Modelo</td>
<td>Placa</td>
<td>Vaga</td>
<td>Entrada</td>

</tr>
</thead>
<tbody>
</tbody>

</table>
<table id="estacionamento" border="2">
<tr class="vagas_n">
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">A</td>
<td id="A1">LIVRE</td>
<td id="A2">LIVRE</td>
<td id="A3">LIVRE</td>
<td id="A4">LIVRE</td>
<td id="A5">LIVRE</td>
<td id="A6">LIVRE</td>
<td id="A7">LIVRE</td>
<td id="A8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">B</td>
<td id="B1">LIVRE</td>
<td id="B2">LIVRE</td>
<td id="B3">LIVRE</td>
<td id="B4">LIVRE</td>
<td id="B5">LIVRE</td>
<td id="B6">LIVRE</td>
<td id="B7">LIVRE</td>
<td id="B8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">C</td>
<td id="C1">LIVRE</td>
<td id="C2">LIVRE</td>
<td id="C3">LIVRE</td>
<td id="C4">LIVRE</td>
<td id="C5">LIVRE</td>
<td id="C6">LIVRE</td>
<td id="C7">LIVRE</td>
<td id="C8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">D</td>
<td id="D1">LIVRE</td>
<td id="D2">LIVRE</td>
<td id="D3">LIVRE</td>
<td id="D4">LIVRE</td>
<td id="D5">LIVRE</td>
<td id="D6">LIVRE</td>
<td id="D7">LIVRE</td>
<td id="D8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">E</td>
<td id="E1">LIVRE</td>
<td id="E2">LIVRE</td>
<td id="E3">LIVRE</td>
<td id="E4">LIVRE</td>
<td id="E5">LIVRE</td>
<td id="E6">LIVRE</td>
<td id="E7">LIVRE</td>
<td id="E8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">F</td>
<td id="F1">LIVRE</td>
<td id="F2">LIVRE</td>
<td id="F3">LIVRE</td>
<td id="F4">LIVRE</td>
<td id="F5">LIVRE</td>
<td id="F6">LIVRE</td>
<td id="F7">LIVRE</td>
<td id="F8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">G</td>
<td id="G1">LIVRE</td>
<td id="G2">LIVRE</td>
<td id="G3">LIVRE</td>
<td id="G4">LIVRE</td>
<td id="G5">LIVRE</td>
<td id="G6">LIVRE</td>
<td id="G7">LIVRE</td>
<td id="G8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">H</td>
<td id="H1">LIVRE</td>
<td id="H2">LIVRE</td>
<td id="H3">LIVRE</td>
<td id="H4">LIVRE</td>
<td id="H5">LIVRE</td>
<td id="H6">LIVRE</td>
<td id="H7">LIVRE</td>
<td id="H8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">I</td>
<td id="I1">LIVRE</td>
<td id="I2">LIVRE</td>
<td id="I3">LIVRE</td>
<td id="I4">LIVRE</td>
<td id="I5">LIVRE</td>
<td id="I6">LIVRE</td>
<td id="I7">LIVRE</td>
<td id="I8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">J</td>
<td id="J1">LIVRE</td>
<td id="J2">LIVRE</td>
<td id="J3">LIVRE</td>
<td id="J4">LIVRE</td>
<td id="J5">LIVRE</td>
<td id="J6">LIVRE</td>
<td id="J7">LIVRE</td>
<td id="J8">LIVRE</td>
</tr>
</table>

<script type="text/javascript">


// variaveis globais
var corpo_tabela = document.querySelector('tbody');

var campo_botao = document.createElement('button')

campo_botao.innerHTML = 'Excluir'

function adicionar(){

// Variaveis Principais da função
var cliente_ = document.getElementById('cliente').value;
var modelo_ = document.getElementById('modelo').value;
var placa_ = document.getElementById('placa').value;
var vaga_ = document.getElementById('vaga').value;
var hora_entrada = new Date();
var minutos_entrada = new Date();
var entrada_ = hora_entrada.getHours() + ':' + minutos_entrada.getMinutes();

var campo_botao = document.createElement('button')

campo_botao.innerHTML = 'Excluir'

campo_botao.addEventListener("click", function(){
linha.parentNode.parentNode.removeChild(linha.parentNode);
});


// Validação do formulario
if ((cliente_ == "") || (modelo_ == "") || (placa_ == "") || (vaga_ == "")){
alert ("Preencha os campos vazios")

}
// Validação da vaga
else {
var id = document.getElementById(document.getElementById('vaga').value)

if (id.innerHTML != "LIVRE") {
alert ("Vaga ocupada, favor escolher outra!");
} else {

id.style.background = 'red';
id.innerHTML = placa_;
console.log(id)


// criação das tag html
var linha = document.createElement('tr');
var campo_cliente = document.createElement('td');
var campo_modelo = document.createElement('td');
var campo_placa = document.createElement('td');
var campo_vaga = document.createElement('td');
var campo_entrada = document.createElement('td');


// atribuindo para variavel o texto dos campos do formulario
var texto_cliente = document.createTextNode(cliente_);
var texto_modelo = document.createTextNode(modelo_);
var texto_placa = document.createTextNode(placa_);
var texto_vaga = document.createTextNode(vaga_);
var texto_entrada = document.createTextNode(entrada_);

// inserindo o texto nas tags criadas
campo_cliente.appendChild(texto_cliente);
campo_modelo.appendChild(texto_modelo);
campo_placa.appendChild(texto_placa);
campo_vaga.appendChild(texto_vaga);
campo_entrada.appendChild(texto_entrada);

linha.appendChild(campo_cliente);
linha.appendChild(campo_modelo);
linha.appendChild(campo_placa);
linha.appendChild(campo_vaga);
linha.appendChild(campo_entrada);
linha.appendChild(campo_botao);


corpo_tabela.appendChild(linha);

// limpar formulario
document.getElementById('cliente').value='';
document.getElementById('modelo').value='';
document.getElementById('placa').value='';
document.getElementById('vaga').value='';


}

}

}

</script>
</body>
</html>.
Fhfk

Fhfk

Curtidas 0

Respostas

Thiago Moreno

Thiago Moreno

16/10/2019

campo_botao.addEventListener("click", function(this){
corpo_tabela.removeChild(this.parentNode.parentNode.rowIndex);
});
GOSTEI 0
POSTAR