Excluir linha da tabela com Javascript

16/10/2019

0

HTML CSS JavaScript

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

Responder

Posts

26/10/2019

Thiago Moreno 

campo_botao.addEventListener("click", function(this){
corpo_tabela.removeChild(this.parentNode.parentNode.rowIndex);
});
Responder
Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar