By which means one can remove the dynamic cell inserted in the HTML table

Asked

Viewed 66 times

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>

The above script has two distinct functions, one of them to know inserirLinha which includes a new row in the already predefined table in HTML, but the function removeLinha is not fulfilling its role, why?

In the console browser, accuses:

Typeerror: delete is null

The Debbuger points to: 

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

Tai a problem that little shows me what to solve.

javascript table dom dinâmico

  • Now I’m running out of time to see, but what I think is that in onclick="removeLinha(this)", the this refers to the object input (not to an ID), which is why getElementById returns null.

  • And to delete a row from a table, you might want to use deleteRow (instead of parentNode, depending on the structure of the page, the result can vary greatly)

3 answers

2


You can do it like this:

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>

The this past is the HTML element so use parentNode twice, the first to catch the td and the second to tr, and seven the attribute outerHTML for an empty string, this will delete it

  • 2

    If you need this id for something else use @Matheusreis solution if you can’t use mine because it’s simpler and you won’t have to worry about ids

2

The problem is that you are trying to use the function getElementById(), but no element is found. O this that you are passing to the function is not an id. Therefore, a null reference is returned.

What you should do is set an id for each line!

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

Being linhas a global variable, which will count the number of lines so far. Then, after setting the id, you must pass it as parameter to remove line function.

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;
}

Another detail: You were doing apagar.parentNode.parentNode.removeChild(apagar). However, the line is only one level of the element apagar. So just do apagar.parentNode.removeChild(apagar)

Complete code below:

 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>

  • Now, with so many different responses it was even difficult to define the vote, I will analyze all the answers and their explanations for me to vote, since they are all useful. Grateful for your correction.

  • The community is good for this.. different solutions to the same problem! Always at your beck and call :)

1

delete is null is a clue; it may be that the id being passed on to removerLinha does not exist in the document, or is misspelled.

See also that removerLinhas does not check whether what is being erased is really a line, but rather, erases anything that has a great-grandfather kinship, erasing the father and grandson, the latter with the id informed.

Change the following line:

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

for

var ids = Math.floor(Math.random() * 1000) + 1);
newRow.insertCell(0).innerHTML = '<input id="id' + ids +  '" type="button" value="X" onclick="removeLinha(\"id' + ids + '\")" />';

  • No, I’m using it Math.floor and Math.random to randomly generate button Ids

Browser other questions tagged javascript table dom dinâmico

You are not signed in. Login or sign up in order to post.