3

Script

        var opt = document;

        function inserirLinha(id) {
            var newRow = opt.createElement('tr');
            newRow.insertCell(0).innerHTML = '<input type="button" value="X" onclick="removeLinha(this)" />';
            newRow.insertCell(1).innerHTML = 'REMOVER';
            newRow.insertCell(2).innerHTML = 'A LINHA';
            opt.getElementById(id).appendChild(newRow);
            return false;
        }

	function removeLinha(id) {
            var apagar = opt.getElementsByTagName(id);
            apagar.parentNode.parentNode.removeChild(apagar.parentNode);
	}
<center>
    <form onsubmit="return inserirLinha('minhaTabela')">
        <table>
            <tr>
                <tbody id="minhaTabela"></tbody>
                </tr>
            </table>
        <input type="submit" value="Adicionar" name="submit">
    </form>
</center>

O script acima tem duas funções distintas, uma delas à saber inserirLinha que inclui uma nova linha na tabela ja predefinida no HTML, mas a função removeLinha não esta cumprindo o seu papel, por quê?

No console do navegador, acusa:

TypeError: apagar is null

O Debbuger aponta para:

apagar.parentNode.parentNode.removeChild(apagar.parentNode);

Tai um problema que pouco me mostra o quê resolver.

2
  • Agora estou sem tempo de ver, mas o que eu acho é que no onclick="removeLinha(this)", o this se refere ao objeto input (não a um ID), por isso que getElementById retorna null.
    – hkotsubo
    3/06/2018 às 14:33
  • E para apagar uma linha de uma tabela, talvez seja melhor usar deleteRow (ao invés de parentNode, que dependendo da estrutura da página, pode variar muito o resultado)
    – hkotsubo
    3/06/2018 às 14:41

3 Respostas 3

2

Você pode fazer assim:

var opt = document;

function inserirLinha(id) {
  var newRow = opt.createElement('tr');
  newRow.insertCell(0).innerHTML = '<input type="button" value="X" onclick="removeLinha(this)" />';
  newRow.insertCell(1).innerHTML = 'REMOVER';
  newRow.insertCell(2).innerHTML = 'A LINHA';
  opt.getElementById(id).appendChild(newRow);
  return false;
}

function removeLinha(element) {
  element.parentNode.parentNode.outerHTML = '';
}
<center>
  <form onsubmit="return inserirLinha('minhaTabela')">
    <table>
      <tr>
        <tbody id="minhaTabela"></tbody>
      </tr>
    </table>
    <input type="submit" value="Adicionar" name="submit">
  </form>
</center>

O this passado é o elemento HTML então use parentNode duas vezes, o primeiro para pegar o td e o segundo a tr, e sete o atributo outerHTML para uma string vazia, isso o excluirá

1
  • 2
    Se você precisar desse id para alguma outra coisa use a solução do @MatheusReis se não pode usar a minha por ser mais simples e não ira precisar se preocupar com os ids
    – Costamilam
    3/06/2018 às 15:09
2

O problema é que você está tentando usar a função getElementById(), mas não é encontrado nenhum elemento. O this que você está passando para a função não é um id. Logo, é retornada uma referência null.

O que você deveria fazer é definir um id pra cada linha!

newRow.id = "linha" + (linhas+1)

Sendo linhas uma variável global, que irá contar a quantidade de linhas até o momento. Então, após definir o id, você deve passar ele como parâmetro pra função remove linha.

function inserirLinha(id) {
   var newRow = opt.createElement('tr');
   newRow.id = "linha" + (linhas+1)
   newRow.insertCell(0).innerHTML = '<input type="button" value="X" onclick="removeLinha(' + newRow.id + ')" />';
   newRow.insertCell(1).innerHTML = 'REMOVER';
   newRow.insertCell(2).innerHTML = 'A LINHA';
   opt.getElementById(id).appendChild(newRow);
   return false;
}

Outro detalhe: Você estava fazendo apagar.parentNode.parentNode.removeChild(apagar). Porém, a linha está apenas um nível do elemento apagar. Então, basta fazer apagar.parentNode.removeChild(apagar)

Código completo abaixo:

 var opt = document;
 linhas = 0

function inserirLinha(id) {
            var newRow = opt.createElement('tr');
            newRow.id = "linha" + (linhas+1)
            linhas += 1
            newRow.insertCell(0).innerHTML = '<input type="button" value="X" onclick="removeLinha('+ newRow.id + ')" />';
            newRow.insertCell(1).innerHTML = 'REMOVER';
            newRow.insertCell(2).innerHTML = 'A LINHA';
            opt.getElementById(id).appendChild(newRow);
            return false;
}

function removeLinha(id) {
    var apagar = opt.getElementById(id.id);
    apagar.parentNode.removeChild(apagar);
}
<center>
    <form onsubmit="return inserirLinha('minhaTabela')">
        <table>
            <tr>
                <tbody id="minhaTabela"></tbody>
                </tr>
            </table>
        <input type="submit" value="Adicionar" name="submit">
    </form>
</center>

2
  • Agora, com tanta diversidade de repostas ficou até mesmo difícil definir o voto, vou analisar todas respostas e suas explicações pra eu votar, ja que todas são úteis. Grato por sua correção. 3/06/2018 às 14:57
  • A comunidade é boa por isso.. diferentes soluções para um mesmo problema! Sempre às ordens :)
    – reisdev
    3/06/2018 às 14:58
1

apagar is null é uma pista; pode ser que o id sendo passado para removerLinha não exista no documento, ou está com erro de ortografia.

Veja também que removerLinhas não verifica se o que está sendo apagando é realmente uma linha, mas sim, apaga qualquer coisa que tenha um parentesco avô-neto, apagando o pai e o neto, este último com o id informado.

Troque a seguinte linha:

newRow.insertCell(0).innerHTML = '<input type="button" value="X" onclick="removeLinha(this)" />';

por

var ids = Math.floor(Math.random() * 1000) + 1);
newRow.insertCell(0).innerHTML = '<input id="id' + ids +  '" type="button" value="X" onclick="removeLinha(\"id' + ids + '\")" />';
1
  • Não, tô usando Math.floor e Math.random para gerar IDs de botão aleatoriamente 3/06/2018 às 14:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .