javascript - 删除appendElement javascript

Question

我有这段代码，当用户单击添加按钮时，将出现一个文本框。但我想要实现的是通过单击按钮删除单独附加的文本框:

<div class="form_group">
   <div id="p_scents">
      <a class="btn btn-warning btn-sm" onclick="addAffiliate()">+ Add Merchant ID</a><br>
      <a class="btn btn-warning btn-sm" onclick="deleteAffiliate()">+ Remove Merchant ID</a><br>
      <p></p>
   </div>
</div>

我的 JavaScript 是:

function addAffiliate() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;
    $('<p><label for="p_scnts"><input type="text" required="true" id="p_scnt" size="30" class="form-control" name="merchant[]" value="" placeholder="Input MerchantID" /></label>  </p>').appendTo(scntDiv);
    i++;
}

我的 deleteAffiliate 函数是我想要删除之前附加的单个文本框的地方。

Answer 1

首先，您要附加多个具有相同 id“p_scnt”的元素，您应该避免这种情况。将函数更改为:

function addAffiliate()
{
   var scntDiv = $('#p_scents');
   var i = $('#p_scents p').size() + 1;
   // here we change the id to p_scnt_ + iterator
    $('<p><label for="p_scnts"><input type="text" required="true" id="p_scnt_'+i+'" size="30" class="form-control" name="merchant[]" value="" placeholder="Input MerchantID" /></label>  </p>').appendTo(scntDiv);
            i++;

}

然后更改删除函数以删除父级的最后一个子级。

function deleteAffiliate()
{
    $('#p_scents p:last-child').remove();
}