javascript - jQuery 按 id 删除

Question

我在字段集中添加测试，虽然我可以添加它们，但我不确定如何编写正确的函数来删除它们。我让它在 javascript 中工作，但被要求使用 JQuery 编写它，但似乎无法使其工作。我研究过的所有示例似乎都不适用于我在其中构建删除按钮的原始克隆功能。 fieldsets 也重复，我已经有了代码，只需要一些关于这个删除事件函数的帮助。

这里是 javascript/jquery:

document.getElementById('button').onclick = duplicate;

var i = 0;
var original = document.getElementById('dataTes');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "dataTes" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
}

function remove(){

}

这是 html :

<fieldset>
<legend>Test</legend>
<input type="submit" class="button" id = "button" value="+" onlick="duplicate()" title = "#">
<input type="submit" class="button" id = "button" value="-" onlick="remove()" title = "#">
<div id="dataTes">
<table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:10px;" width="97%">
    <tr>
        <td width="100px">Test</td>
        <td width="2px">:</td>
        <td width="2px"><input type="text" name="usrname"></td>
        <td>
            <input type="submit" class="button" id = "add" value="+" onClick="addRow('#')" title = "#">
            <input type="submit" class="button" id = "add" value="-" onClick="deleteRow('#')" title = "#">
        </td>
    </tr>

    <table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:5px;margin-left:40px;" width="97%">
        <tr>
            <td width="2px"></td>
            <td width="100px">Fill</td>
            <td width="2px">:</td>
            <td><input type="text" name="usrname"></td>
        </tr>
        <tr>
            <td width="2px"></td>
            <td width="100px">Fill</td>
            <td width="2px">:</td>
            <td><input type="text" name="usrname"></td>
        </tr>
        <table id="dataID" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%">
            <tr>
                <td width="2px"></td>
                <td width="100px">Fill</td>
                <td width="2px">:</td>
                <td>
                    <input type="text" name="usrname">
                </td>
            </tr>
        </table>
    </table>


</table>
</div>
</fieldset>

Answer 1

这是快速而完整的解决方案。删除元素 add 和 remove 按钮的内联函数，并将事件附加到它们的 id，如下所示:

var id = 0; //global id to create unique id

$(document).ready(function() {
  //attach click event to element/button with id add and remove
  $("#add,#remove").on('click', function() {
    var currentElemID = $(this).attr('id'); //get the element clicked

    if (currentElemID == "add") { //if it is add elem
      var cloneParent = $("#dataTes").clone(); //clone the dataTes element
      id=$("div[id^=dataTes]").length;//get the count of dataTes element
      //it will be always more than last count each time
      cloneParent.find('[id]').each(function() {
       //loop through each element which has id attribute in cloned set and replace them 
       //with incremented value
        var $el = $(this); //get the element
        $el.attr('id', $el.attr('id') + id);
        //ids would now be add1,add2 etc.,
      });
      cloneParent.attr('id', cloneParent.attr('id') + id);//replace cloneParent id
      cloneParent.appendTo('fieldset');//append the element to fieldset
      $("#remove").show();//show remove button only if there is more than one dataTes element
    } else {
      $("div[id^=dataTes]:last").remove();
      //just remove the last dataTes
      //[id^=dataTes]:last annotates remove last div whose id begins with dataTes
      //remember we have id like dataTes1,dataTes2 etc
      if($("div[id^=dataTes]").length==1){
         //check if only one element is present
         $("#remove").hide();//if yes hide the remove button
      }
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
  <legend>Test</legend>
  <input type="submit" class="button" id="add" value="+" title="#">
  <input type="submit" class="button" id="remove" value="-" style="display:none;" title="#">

  <!--hide the remove button with display:none initially-->

  <div id="dataTes">
    <table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:10px;" width="97%">
      <tr>
        <td width="100px">Test</td>
        <td width="2px">:</td>
        <td width="2px">
          <input type="text" name="usrname">
        </td>
        <td>
          <input type="submit" class="button" id="add" value="+" title="#">
          <input type="submit" class="button" id="sub" value="-" title="#">
        </td>
      </tr>

      <table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:5px;margin-left:40px;" width="97%">
        <tr>
          <td width="2px"></td>
          <td width="100px">Fill</td>
          <td width="2px">:</td>
          <td>
            <input type="text" name="usrname">
          </td>
        </tr>
        <tr>
          <td width="2px"></td>
          <td width="100px">Fill</td>
          <td width="2px">:</td>
          <td>
            <input type="text" name="usrname">
          </td>
        </tr>
        <table id="dataID" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%">
          <tr>
            <td width="2px"></td>
            <td width="100px">Fill</td>
            <td width="2px">:</td>
            <td>
              <input type="text" name="usrname">
            </td>
          </tr>
        </table>
      </table>


    </table>
  </div>
</fieldset>

作为注释逐行解释。如果这让您感到困惑，请告诉我。