Question

我有这个HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Agenda</title>
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/agenda.css" rel="stylesheet">
  <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
  <script type="text/javascript" src=js/agenda.js></script>
</head>
<body>

<div class="container">
    <div class="row">

        <div class="col-xs-12 col-md-3 ">
                <input type="text" id="txtNombre"  placeholder="Usuario" required="" autofocus="" class="form-control" >
        </div>
        <div class="col-xs-12 col-md-3 ">
                <input type="text" id="txtTelefono"  placeholder="Telefono" required="" autofocus="" class="form-control" >
        </div>
        <div class="col-xs-12 col-md-3 ">
                <input type="text" id="txtDireccion"  placeholder="Direccion" required="" autofocus="" class="form-control" >
        </div>
        <div class="col-xs-12 col-md-3 ">
                <input type="text" id="txtEmail"  placeholder="Correo" required="" autofocus="" class="form-control" >
        </div>
    </div>  
    <div class="row">
        <div class="col-xs-12  col-md-3  col-md-offset-9 ">
            <img src="img/mas.png" class="agregar" id="btnAgregar" autofocus="" >
        </div>  
    </div>

</div>

</body>
</html>

当用户按“添加”时，必须在输入中添加具有相同日期的新行，但添加按钮的每一行，编辑当前行并删除它。所以你可以添加N元素并逐行删除（或逐个编辑）。

我正在使用jquery

Answer 1

您好，请查看此链接

https://plnkr.co/edit/B2Nmf5wzKBqHypnLFc59

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
   <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
    <div class="row main" id="main">

        <div class="col-xs-12 col-md-3 ">
                <input type="text" id="txtNombre"  placeholder="Usuario" required="" autofocus="" class="form-control" >
        </div>
        <div class="col-xs-12 col-md-3 ">
                <input type="text" id="txtTelefono"  placeholder="Telefono" required="" autofocus="" class="form-control" >
        </div>
        <div class="col-xs-12 col-md-3 ">
                <input type="text" id="txtDireccion"  placeholder="Direccion" required="" autofocus="" class="form-control" >
        </div>
        <div class="col-xs-12 col-md-3 ">
                <input type="text" id="txtEmail"  placeholder="Correo" required="" autofocus="" class="form-control" >
        </div>
    </div>   
    <div class="row buttonbox">
        <div class="col-xs-12  col-md-3  col-md-offset-9 ">
            <button type="button" class="btn btn-success add" >ADD +</button>
                <button type="button" class="btn btn-danger remove" >DEL -</button>
        </div>  
    </div>

</div>
  </body>

</html>

和JS

// Add your javascript here
$(function(){
   var i = 0;
  var last12 = $('.buttonbox').last();
  $(document).on('click', '.add', function() {

  var clone = $('#main').clone();
 clone.find("input").val("");
 clone.attr("id", "main" + i++).insertBefore(last12);



      //clone.id = "main" + i;

  });

  $(".remove").click(function(){

     $('.main:last').remove();
  });
});

你可以克隆上面的div并再次添加

Answer 2

通过添加2个按钮添加和减去行来更新您的HTML，

HTML

<div class="row">
 <!--For adding row-->
<div class="col-xs-12  col-md-3  col-md-offset-9 ">
    <img src="#" class="agregar" id="btnadd" autofocus="" >
</div>  
<!-- for removing rows-->      
    <div class="col-xs-12  col-md-3  col-md-offset-9 ">
        <img src="#" class="agregar" id="btnrmv" autofocus="" >
    </div>

更新了JS，

$(document).ready(function(){
$("#btnadd").click(function(){
$(".container > .row:first").clone().insertBefore('.row:last');
});
$("#btnrmv").click(function(){
$(".row:first").remove();
});
});

因此，每当用户点击#btnadd时，它会添加一个并点击#btnrmv，它会删除一个。

如何添加动态元素jquery？

2 个答案: