php - 如何使用 jquery 删除/删除 HTML TR 块

Question

我在 jQuery 上有这个代码来动态添加一个 tr 块和一些输入，它工作正常；但删除功能不起作用，我将不胜感激任何帮助使其工作。

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

这是我的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>

---

解决方案

最后，我想出了给每个 tr 行一个附加到生成的索引的索引：

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

这是函数，现在我只需要一个包含总行数的隐藏值。

Answer 1

您需要使用jquery on将事件添加到动态添加的 html 元素。为要附加删除事件的按钮分配一个类。

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

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

Answer 2

用解决方案更新了我的问题

Answer 3

您需要删除之间的空间.remove ();

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

应该：

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

Answer 4

好吧，我仍然看不到您首先在哪里调用该函数。似乎没有附加任何事件。但是，假设您在点击事件或类似事件中的其他地方触发它。

您已将行的 id 分配为 'row_'+counter。所以你会有一个 id="row_2" 或类似的东西。

你是 .remove() 函数（塞缪尔是正确的关于使它成为 .remove() ）应该调用

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

您还可以按照 jQuery 的文档使用 .replaceWith("") 。他们做同样的事情。