By what means can you remove dynamic cell inserted in the HTML table

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 which is inserirLinha which includes a new line in the already predefined HTML table, but the removeLinha function is not fulfilling its role, why?

In the console of the browser, it complains:

  

TypeError: delete is null

Debbuger points to:

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

A problem that little shows me what to solve.

    
asked by anonymous 03.06.2018 / 16:05

3 answers

2

You can do 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 is the HTML element then use parentNode twice, the first to get the td and the second the tr , and seven the outerHTML attribute for an empty string, that is the will delete

    
03.06.2018 / 16:53
2

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

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

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

Being this a global variable, which will count the number of rows so far. So, after setting the id, you should pass it as a parameter to the 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 linhas . However, the line is only one level of the apagar.parentNode.parentNode.removeChild(apagar) element. So, just do 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>
    
03.06.2018 / 16:54
1

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

Also note that removerLinhas does not check if what is being deleted is actually a line, but rather, it deletes anything that has a grandfather parentage, deleting the parent and the grandchild, the latter with the id informed.

Change the following line:

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

by

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