JavaScript-添加和刪除div onclick子href

Question

在我的表單中，我有一個名為Add Record的href，當單擊該行時，會將新的html元素行添加到表單中。 添加的html元素行具有remove和add 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> 

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

Answer 2

在上面的代碼中

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 。

希望這可以幫助。

Answer 3

這不應該是其他DIV嗎？

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

> $（“＃main-content”）。append（html）;

Answer 4

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>