Question

我在网页上尝试实现的功能有点小问题。我有两个图像，加号和减号，当点击加号时，它克隆一个由几个文本框组成的div。负图意味着删除此div。

目前，当我点击减号时，我似乎无法找到阻止最后一个div被删除的方法。我想阻止删除最后一行并使用警报通知用户它无法删除。

有人能给我一些见解吗？我在这里搜索了一段时间并找到了类似的东西，但它都是使用我没有经验的JQuery完成的。

以下是我用来尝试删除div的代码。

  function deleteRow1() {

    // row-to-clone1 is the name of the row that is being cloned
    var div = document.getElementById('row-to-clone1');

    if (div) {
        div.parentNode.removeChild(div);
    }

    if ((div).length != 1) {
        alert("Cannot delete all rows.").remove();
    }
}

当我尝试删除行时，它会显示警告，但仍会删除div。我意识到这可能是一个非常简单的修复，我对上面的实现可能不正确，如果有人可以帮助我会很感激。

Answer 1

元素的ID必须是唯一的，因此请使用类来获取它们

＆＃13;

function deleteRow1() {
  // row-to-clone1 is the name of the row that is being cloned
  var divs = document.getElementsByClassName('row-to-clone1');

  if (divs.length > 1) {
    divs[0].parentNode.removeChild(divs[0]);
  } else {
    alert("Cannot delete all rows.")
  }
}

function add1() {
  var div = document.getElementById('row-to-clone1');
  if (div) {
    var clone = div.cloneNode(true);
    delete clone.id;
    div.parentNode.appendChild(clone);
  }
}

＆＃13;

<button onclick="add1()">Add</button>
<button onclick="deleteRow1()">Delete</button>
<div id="row-to-clone1" class="row-to-clone1">div</div>

＆＃13;

防止在Javascript中删除最后一个div

1 个答案: