JavaScript-添加和删除div onclick子href

时间:2018-07-26 04:18:10

标签: javascript html

在我的表单中,我有一个称为Add Record的href,当单击该href时,会将新的html元素行添加到表单中。添加的html元素行具有removeadd href。单击行尾的remove后,该特定行将被删除...但是,当我单击子元素上的add时,不会创建新行。

$(document).ready(function(e) {

  var html = '<div><label>Category:</label><select id="childcategory"><option value="0" selected>Select Category</option><option value="CatA">Category A</option><option value="CatB">Category B</option></select><a href="#" id="remove">Remove</a><a href="#" id="childAdd">AddRecord</a></div>';
  var maxRows = 20;
  var x = 1;
  //Add rows
  $("#add").click(function(e) {
    if (x <= maxRows) {
      $("#container").append(html);
      x++;
    }
  })

  /*//Add rows
  $("#container").on('click', '#childAdd', function(e){
      $(this).parent('div').add();
      x++;
      })
  })*/

  //Remove rows
  $("#container").on('click', '#remove', function(e) {
    $(this).parent('div').remove();
    x--;
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="container" class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="main-content">
          <div class="block">
            <label>Category:</label>
            <select id="category" name="category[]" required>
                          <option value="0" selected>Select Category</option>   
                          <option value="ToiletSoap">Toilet Soap</option>
                          <option value="ToothPaste">ToothPaste</option>
                        </select>
            <a href="#" id="add">Add record</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

4 个答案:

答案 0 :(得分:1)

您可以对add record使用相同的功能,希望这是您预期的结果,如果没有请发表评论,我会更新

$(document).ready(function(e) {

  var html = '<div><label>Category:</label><select id="childcategory"><option value="0" selected>Select Category</option><option value="CatA">Category A</option><option value="CatB">Category B</option></select><a href="#" id="remove">Remove</a><a href="#" id="childAdd">AddRecord</a></div>';
  var maxRows = 20;
  var x = 1;
  //Add rows
  $("form").on('click','#add, #childAdd', function(e) {
    if (x <= maxRows) {
      $("#container").append(html);
      x++;
    }
  })


  //Remove rows
  $("#container").on('click', '#remove', function(e) {
    $(this).parent('div').remove();
    x--;
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="container" class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="main-content">
          <div class="block">
            <label>Category:</label>
            <select id="category" name="category[]" required>
                          <option value="0" selected>Select Category</option>   
                          <option value="ToiletSoap">Toilet Soap</option>
                          <option value="ToothPaste">ToothPaste</option>
                        </select>
            <a href="#" id="add">Add record</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

答案 1 :(得分:0)

在上面的代码中

var html = '<div><label>Category:</label><select id="childcategory"><option value="0" selected>Select Category</option><option value="CatA">Category A</option><option value="CatB">Category B</option></select><a href="#" id="remove">Remove</a><a href="#" id="childAdd">AddRecord</a></div>';

var maxRows = 20;
var x = 1;
//Add rows
$("#add").click(function(e) {       //<---  Try using #childAdd  instead of #add or change childAdd ID of href to add.
  if (x <= maxRows) {
    $("#container").append(html);
    x++;
  }
})

由于在HTML add href中,您已将id用作childAdd

希望这会有所帮助。

答案 2 :(得分:0)

这不应该是其他DIV吗?

$("#container").append(html);
  
    
      

>       $(“#main-content”)。append(html);

    
  

答案 3 :(得分:0)

  1. 我不希望给出相同的ID,而是使用类而不是ID
  2. 添加行时错过了append(html)

$(document).ready(function(e) {

  var html = '<div><label>Category:</label><select id="childcategory"><option value="0" selected>Select Category</option><option value="CatA">Category A</option><option value="CatB">Category B</option></select><a href="#" class="remove">Remove</a><a href="#" class="childAdd">AddRecord</a></div>';
  var maxRows = 20;
  var x = 1;
  //Add rows
  $("#add").click(function(e) {
    if (x <= maxRows) {
      $("#container").append(html);
      x++;
    }
  })

  //Add rows
  $("#container").on('click', '.childAdd', function(e){
      $(this).parent('div').append(html);
      console.log("child add")
      x++;
      })
 

  //Remove rows
  $("#container").on('click', '.remove', function(e) {
    $(this).parent('div').remove();
    x--;
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="container" class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="main-content">
          <div class="block">
            <label>Category:</label>
            <select id="category" name="category[]" required>
                          <option value="0" selected>Select Category</option>   
                          <option value="ToiletSoap">Toilet Soap</option>
                          <option value="ToothPaste">ToothPaste</option>
                        </select>
            <a href="#" id="add">Add record</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>