javascript - 防止删除最后一个子级 javascript

Question

我有这个 HTML 代码

<div class="form_group">
    <div id="p_scents">
    <a class="btn btn-warning btn-sm" onclick="addAffiliate()">+ Add Merchant ID</a> <a class="btn btn-danger btn-sm" onclick="deleteAffiliate()">X</a>
            <p><label for="p_scnts"><input type="text" required="true"  size="30" class="form-control" name="merchant[]" value="<?php echo $keys->affiliate ?>" placeholder="Input MerchantID" /></label>  </p>
          <p></p></div>
    <hr>  

当我按X时，它将删除最后一个子项。但我希望剩下的 1 个 child 或第一个 child 不会被删除..就像有一个警告..

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=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();
}

Answer 1

检查是否存在超过 1 个项目。如果是这样，请将其删除。

function deleteAffiliate()
{
  var $items = $('#p_scents p');
  if ($items.length > 1) {
    $items.last().remove();
  } else {
    alert("At least 1 item must remain. Not deleting.");
  }
}