时间戳

首页 > 解决方案 > jquery .on 用于删除元素

javascript - jquery .on 用于删除元素

问题描述

我有一个问题，我正在做一个表单，当用户单击按钮“+”时会生成新的输入文本，但我想反过来，如果单击按钮“-”，则删除输入文本框。我的按钮“-”是在 javascript 中生成的，并且永远不会传递给方法 .on（我也使用 .click 进行了测试）。如果我之前在 html 中执行按钮，它会传递给 .click 方法。我该怎么做才能使我的表单中的按钮“-”起作用？

$(document).ready(function () {
  var cuentaInputs = $('#contenedorRespuestasAgregar').children().length;
  $('#agregar').click(function () {
    $('<br class="fila' + cuentaInputs + '" /><label class="fila' + cuentaInputs + '" for="dato' + cuentaInputs + '"> Respuesta ' + cuentaInputs + ':</label><input type="text" name="dato' + cuentaInputs + '" class="fila' + cuentaInputs + '" id="dato' + cuentaInputs + '" placeholder="Inserte Respuesta" />').appendTo('#contenedorRespuestasAgregar');

    if (2 == cuentaInputs) {
      $('<input type="button" id="eliminame" value="-"/>').insertAfter('#agregar')
    }
    cuentaInputs++;
  });

  $('button#eliminame').on("click", function () {
    $('.fila' + cuentaInputs).remove();
    cuentaInputs--;
    console.log("esto es cuentaInput: " + cuentaInputs);
    if (1 == cuentaInputs) {
      $(this).remove();
    }
  });
});	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Registrar pregunta y respuesta</title>
  <link rel="stylesheet" href="css/registroPreguntaStyle.css">
</head>
<body>


<div class="formularioRegistroPregunta">
  <h1>Registrar pregunta/respuesta para el formulario</h1>
  <form action="ServletRegistroAdminPregunta" method="post">

    <label>Introduzca la pregunta:</label>
    <input type="text" name="registroPregunta" placeholder="Pregunta">
    <br /><br />

    <label>Señale el tipo de respuesta:</label>
    <input type="radio" name="tipoRespuesta" value="Texto">Texto &nbsp;&nbsp;&nbsp;
    <input type="radio" name="tipoRespuesta" value="Radio">Una respuesta &nbsp;&nbsp;&nbsp;
    <input type="radio" name="tipoRespuesta" value="Check">Varias respuestas &nbsp;&nbsp;&nbsp;
    <br /><br />

    <label>Introduzca las respuestas:</label><br /><br />

    <!-- Contenedor de cajas agregar respuesta a preguntas nuevas -->
    <div id="contenedorRespuestasAgregar">
      <label>Respuesta 1:</label><input type="text" id="resgistroRespuestaId1" name="resgistroRespuesta1" class="rgr"
                                        placeholder="Inserte Respuesta" />
    </div>
    <!-- FIN Contenedor de cajas agregar respuesta a preguntas nuevas -->
    <input type="button" id="agregar" value="+" />

    <br>
    <input type="submit" value="Registrar pregunta">
  </form>
  <button id="botonVolver" onclick="location.href='endometriosis.jsp'">Volver</button>
</div>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

</body>
</html>

标签： javascriptjquery

解决方案

我试图调试您的代码，并意识到.on单击-按钮时甚至没有运行。我将您的脚本更改为这个并且它可以工作，希望它有帮助：

  <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
    <head>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=ISO-8859-1"
        >
        <title>Registrar pregunta y respuesta</title>
        <link rel="stylesheet" href="css/registroPreguntaStyle.css">
    </head>
    <body>

        <div class="formularioRegistroPregunta">
            <h1>
                Registrar pregunta/respuesta para el formulario
            </h1>
            <form
                action="ServletRegistroAdminPregunta"
                method="post"
            >

                <label>Introduzca la pregunta:</label>
                <input
                    type="text"
                    name="registroPregunta"
                    placeholder="Pregunta"
                >
                <br>
                <br>

                <label>Señale el tipo de respuesta:</label>
                <input
                    type="radio"
                    name="tipoRespuesta"
                    value="Texto"
                >
                Texto
                <input
                    type="radio"
                    name="tipoRespuesta"
                    value="Radio"
                >
                Una respuesta
                <input
                    type="radio"
                    name="tipoRespuesta"
                    value="Check"
                >
                Varias respuestas
                <br>
                <br>

                <label>Introduzca las respuestas:</label>
                <br>
                <br>

                <!-- Contenedor de cajas agregar respuesta a preguntas nuevas -->
                <div id="contenedorRespuestasAgregar">
                    <label>Respuesta 1:</label>
                    <input
                        type="text"
                        id="resgistroRespuestaId1"
                        name="resgistroRespuesta1"
                        class="rgr"
                        placeholder="Inserte Respuesta"
                    >
                </div>
                <!-- FIN Contenedor de cajas agregar respuesta a preguntas nuevas -->
                <input
                    type="button"
                    id="agregar"
                    value="+"
                >

                <br>
                <input
                    type="submit"
                    value="Registrar pregunta"
                >
            </form>
            <button
                id="botonVolver"
                onclick="location.href='endometriosis.jsp'"
            >
                Volver
            </button>
        </div>

        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var cuentaInputs = $('#contenedorRespuestasAgregar').children().length;
                $('#agregar').click(function() {
                    $('<div class="fila' +cuentaInputs+ '"><label class="fila' +cuentaInputs+'" for="dato' +cuentaInputs+'"> Respuesta ' +cuentaInputs+ ':</label><input type="text" name="dato' +cuentaInputs+ '" class="fila' +cuentaInputs+ '" id="dato' + cuentaInputs +'" placeholder="Inserte Respuesta" /></div>').appendTo('#contenedorRespuestasAgregar');

                    if (2 == cuentaInputs) {
                        $('<input onclick="removeEl()" type="button"  id="eliminame" value="-"/>').insertAfter('#agregar')
                    }
                    cuentaInputs++;
                });


            });
            function removeEl() {
                $('#contenedorRespuestasAgregar').children().last().remove();

            }
        </script>
    </body>
</html>

推荐阅读