How to delete/remove a HTML TR block with jquery

Question

I have this code on jQuery to add dynamically a tr block and some inputs, it works fine; but the remove function is not working, I will appreciate any help to make it work.

<script type="text/javascript">
var counter = 1;
function remove_row(indice){
    alert(indice);
    $("#" + indice).remove();
    counter--;
} 
function addTableRow(jQtable){
    jQtable.each(function(){
        var $table = $(this);
        // Number of td's in the last table row
        var n = $('tr:last td', this).length;
        var tds = "<tr id='row_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Apellido(s)</strong></td><td><input type='text' name='apellidos_" + counter + "' id='apellidos_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td>  <td class='borde'>&nbsp;<br/>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Nombre(s):</strong></td><td align='left'><input type='text' name='nombres_" + counter + "' id='nombres_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Cédula:</strong></td><td align='left'><select name='pre_ced_" + counter + "' id='pre_ced_" + counter + "'><option selected='selected' value='0'> Seleccione... </option><option value='3'>V</option><option value='4'>E</option></select> - <input type='text' name='suf_ced_" + counter + "' id='suf_ced_" + counter + "'  width='170'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Teléfono:</strong></td><td align='left'><input type='text' name='pre_tel1_" + counter + "' id='pre_tel1_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel1_" + counter + "' id='suf_tel1_" + counter + "' /></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Celular:</strong></td><td align='left'><input type='text' name='pre_tel2_" + counter + "' id='pre_tel2_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel2_" + counter + "' id='suf_tel2_" + counter + "' /></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Fax/Otro:</strong></td><td align='left'><input type='text' name='pre_tel3_" + counter + "' id='pre_tel3_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel3_" + counter + "' id='suf_tel3_" + counter + "' /></td><td class='requerido'>&nbsp;</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Correo:</strong></td><td align='left'><input type='text' name='correo_" + counter + "' id='correo_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Profesión:</strong></td><td align='left'><input type='text' name='profesion_" + counter + "' id='profesion_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td>&nbsp;</td><td><input type='button' value='Eliminar Participante' onclick=\"remove_row('row_" + counter + "');\"> <input type='button' value='Mismos Datos Facturación'></td><td>&nbsp;</td><td class='borde'>&nbsp;</td></tr><tr><td colspan='5'  class='borde' align='center'>&nbsp;</td></tr>";
        if($('tbody', this).length > 0){
            $('tbody', this).append(tds);
        }else {
            $(this).append(tds);
        }
    });
    counter++;
}
</script>

And here is my html

<form action="inscripcion.php" method="post" enctype="multipart/form-data" name="inscribir" id="inscribir">
      <div id="formdiv">
      <table border="0" align="center" cellspacing="0" id="myTable" name="myTable">
      <tr id="row_0">
          <td colspan="5"  class="borde" align="center" >
          Fecha <?php echo date("d/m/Y"); ?>
          </td>
      </tr>
      <tr>
          <td colspan="5"  class="borde" align="center">
          Evento a Inscribirse
          </td>      
      </tr>

      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Taller:
          </strong></td>
          <td align="left"><label for="taller"></label>
            <select name="taller" id="taller" style="width:300px" onchange="xajax_cargar(this.value);">
              <option selected="selected" value="0"> Seleccione... </option>
              <?php
do {  
?>
              <option value="<?php echo $row_cursos['idcurso']?>"><?php echo $row_cursos['titulo']?></option>
              <?php
} while ($row_cursos = mysql_fetch_assoc($cursos));
  $rows = mysql_num_rows($cursos);
  if($rows > 0) {
      mysql_data_seek($cursos, 0);
      $row_cursos = mysql_fetch_assoc($cursos);
  }
?>
            </select></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Período/Ciudad:
          </strong></td>
          <td align="left">
          <div id="ciudadesyfechas">
            <center>Seleccione Taller Primero</center>
          </div>
          </td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>

      <tr>
          <td colspan="5"  class="borde" align="center">
          Datos a Facturar
          </td>      
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Razón Social:
          </strong></td>
          <td align="left"><label for="razon_social"></label>
            <input type="text" name="razon_social" id="razon_social" style="width:300px"/>

          </td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          RIF/CI:
          </strong></td>
          <td align="left"><label for="razon_social"></label>
            <label for="pre_rif"></label>
            <select name="pre_rif" id="pre_rif">
            <option selected="selected" value="0">
            Seleccione...
            </option>
            <option value="1">J</option>
            <option value="2">G</option>
            <option value="3">V</option>
            <option value="4">E</option>
          </select> 
            -
            <label for="suf_rif"></label>
          <input type="text" name="suf_rif" id="suf_rif"  style="width:120px"/> 
          -
          <input type="text" name="suf2_rif" id="suf2_rif" style="width:40px"/></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Teléfono:
          </strong></td>
          <td align="left">
          <input type="text" name="pre_tel1" id="pre_tel1" style="width:60px"/> 
          - 
          <label for="suf_tel1"></label>
          <input type="text" name="suf_tel1" id="suf_tel1" /></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Celular:
          </strong></td>
          <td align="left">
          <input type="text" name="pre_tel2" id="pre_tel2" style="width:60px"/> 
          - 

          <input type="text" name="suf_tel2" id="suf_tel2" /></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Fax/Otro:
          </strong></td>
          <td align="left">

          <input type="text" name="pre_tel3" id="pre_tel3" style="width:60px"/> 
          - 

          <input type="text" name="suf_tel3" id="suf_tel3" /></td>
          <td class="requerido">&nbsp;</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Dirección:
          </strong></td>
          <td align="left">
          <input type="text" name="direccion" id="direccion" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Correo:
          </strong></td>
          <td align="left">

          <label for="correo"></label>
          <input type="text" name="correo" id="correo" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td colspan="5"  class="borde" align="center">
          Participante(s)
          </td>      
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Apellido(s):
          </strong></td>
          <td align="left">


          <input type="text" name="apellidos_0" id="apellidos_0" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Nombre(s):
          </strong></td>
          <td align="left">


          <input type="text" name="nombres_0" id="nombres_0" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Cédula:
          </strong></td>
          <td align="left"><select name="pre_ced" id="pre_ced">
            <option selected="selected" value="0"> Seleccione... </option>

            <option value="3">V</option>
            <option value="4">E</option>
          </select>
            - 
            <label for="suf_ced"></label>
            <input type="text" name="suf_ced_0" id="suf_ced_0"  width="170"/></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Teléfono:
          </strong></td>
          <td align="left">
          <input type="text" name="pre_tel1_0" id="pre_tel1_0" style="width:60px"/> 
          - 
          <label for="suf_tel1"></label>
          <input type="text" name="suf_tel1_0" id="suf_tel1_0" /></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Celular:
          </strong></td>
          <td align="left">
          <input type="text" name="pre_tel2_0" id="pre_tel2_0" style="width:60px"/> 
          - 

          <input type="text" name="suf_tel2_0" id="suf_tel2_0" /></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Fax/Otro:
          </strong></td>
          <td align="left">

          <input type="text" name="pre_tel3_0" id="pre_tel3_0" style="width:60px"/> 
          - 

          <input type="text" name="suf_tel3_0" id="suf_tel3_0" /></td>
          <td class="requerido">&nbsp;</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Correo:
          </strong></td>
          <td align="left">


          <input type="text" name="correo_0" id="correo_0" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Profesión:
          </strong></td>
          <td align="left">


          <input type="text" name="profesion_0" id="profesion_0" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right">&nbsp;</td>
          <td align="left"><input type="button" value="Agregar Participante" id="add" name="add" onclick="addTableRow($('#myTable'));"/> <input type="button" value="Mismos Datos Facturación" /></td>
          <td class="requerido">&nbsp;</td>
          <td class="borde">&nbsp;
          </td>
      </tr>

      <tr>
          <td colspan="5"  class="borde" align="center">
          &nbsp;<input type="hidden" id="num_campos" name="num_campos" value="0" />
<input type="hidden" id="cant_campos" name="cant_campos" value="0" />
          </td>      
      </tr>

      </table>
     <table align="center" border="0">
     <tr>
     <td><input type="submit" name="Submit" id="button" value="Guardar" /> <input type="reset" name="button2" id="button2" value="Restablecer" />
     </td>
     </tr>
     </table>
      </form>

---

Solution

Finally I figured it out giving every tr row an index additional to the one generated:

function eliminar(index) {

    var r=confirm("¿Seguro Desea Eliminar este Participante?");
    if (r==true)
      {
            for (n = 0; n < 10; n++)
            {
                $('tr#row' + n + "_" + index).remove();
                                counter--;
            }
      }

}

function addTableRow(jQtable){
    jQtable.each(function(){
        var $table = $(this);
        // Number of td's in the last table row
        var n = $('tr:last td', this).length;
        var tds = "<tr id='row0_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Apellido(s)</strong></td><td><input type='text' name='apellidos_" + counter + "' id='apellidos_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td>  <td class='borde'>&nbsp;<br/>&nbsp;</td></tr><tr  id='row1_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Nombre(s):</strong></td><td align='left'><input type='text' name='nombres_" + counter + "' id='nombres_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr  id='row2_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Cédula:</strong></td><td align='left'><select name='pre_ced_" + counter + "' id='pre_ced_" + counter + "'><option selected='selected' value='0'> Seleccione... </option><option value='3'>V</option><option value='4'>E</option></select> - <input type='text' name='suf_ced_" + counter + "' id='suf_ced_" + counter + "'  width='170'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr id='row3_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Teléfono:</strong></td><td align='left'><input type='text' name='pre_tel1_" + counter + "' id='pre_tel1_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel1_" + counter + "' id='suf_tel1_" + counter + "' /></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr id='row4_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Celular:</strong></td><td align='left'><input type='text' name='pre_tel2_" + counter + "' id='pre_tel2_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel2_" + counter + "' id='suf_tel2_" + counter + "' /></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr  id='row5_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Fax/Otro:</strong></td><td align='left'><input type='text' name='pre_tel3_" + counter + "' id='pre_tel3_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel3_" + counter + "' id='suf_tel3_" + counter + "' /></td><td class='requerido'>&nbsp;</td><td class='borde'>&nbsp;</td></tr><tr  id='row6_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Correo:</strong></td><td align='left'><input type='text' name='correo_" + counter + "' id='correo_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr  id='row7_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Profesión:</strong></td><td align='left'><input type='text' name='profesion_" + counter + "' id='profesion_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr  id='row8_" + counter + "'><td class='borde'>&nbsp;</td><td>&nbsp;</td><td><input type='button' value='Eliminar Participante' onclick=\"eliminar('" + counter + "');\"> <input type='button' value='Mismos Datos Facturación'></td><td>&nbsp;</td><td class='borde'>&nbsp;</td></tr><tr id='row9_" + counter + "'><td colspan='5'  class='borde' align='center'>&nbsp;</td></tr>";
        if($('tbody', this).length > 0){
            $('tbody', this).append(tds);
        }else {
            $(this).append(tds);
        }
    });
    counter++;
}

Here is the function, and now all I need is a hidden value with the total rows.

Answer 1

Updated my question with the solution

Answer 2

Well I still don't see where you are calling that function first of all. There doesn't appear to be any event attached. But let's say you are trigging it somewhere else in an on click event or something similar.

You've assigned the row's ids of 'row_'+counter. So you'll have an id="row_2" or something similar.

You're .remove() function (and Samuel was right about making it .remove() ) should call

$('tr#row_' + index).remove();

You can also use .replaceWith("") as per jQuery's docs. They do the same thing.

Answer 3

You need to use jquery on to add event to dynamically added html elements. Assign a class to buttons on which you want to attach remove event.

$(document).on('click', '.remove', function (){

    $(this).remove();
    counter--;
} 

Answer 4

You need to remove the space between .remove ();

$("#" + indice).remove ();

should be:

$("#" + indice).remove();