Question

我试图在点击添加或删除按钮时添加和删除HTML部分。前三次单击添加按钮，它会按预期添加更多部分，并在单击删除时删除该部分。但问题是当我删除任何行之后，AddMore Rows函数不起作用并且不再添加行。

以下是添加更多行的代码

var hasHsa3 = false;
var hasHsa4 = false;
var hasHsa5 = false;

function addMoreRows() {

    // console.log("A: "+hasHsa3 + " " + hasHsa4 + " " + hasHsa5);
    if(!hasHsa3 && !hasHsa4 && !hasHsa5)
    {
        hsaNum = 3;
        hasHsa3 = true;
    }
    else if(hasHsa3 && !hasHsa4 && !hasHsa5)
    {
        hsaNum = 4;
        hasHsa4 = true;
    }
    else if(hasHsa3 && hasHsa4 && !hasHsa5)
    {
        hsaNum = 5;
        hasHsa5 = true;
        console.log(hsaNum);
        $("#addMore_1").attr("disabled", true);
    }
    else if(!hasHsa3 && hasHsa4 && hasHsa5)
    {
        hsaNum = 3;
        hasHsa3 = true;
    }
    else if(!hasHsa3 && hasHsa4 && !hasHsa5)
    {
        hsaNum = 3;
        hasHsa3 = true;
    }
    else if(!hasHsa3 && !hasHsa4 && hasHsa5)
    {
        hsaNum = 3;
        hasHsa3 = true;
    }
    else if(hasHsa3 && !hasHsa4 && hasHsa5)
    {
        hsaNum = 4;
        hasHsa4 = true;
    }
    else if(hasHsa3 && hasHsa4 && hasHsa5)
    {
      $("#addMore_1").attr("disabled", true);
        // document.getElementById("addMore_1").disabled = true;
        console.log("button is disabled");
    }

    console.log("B: "+hasHsa3 + " " + hasHsa4 + " " + hasHsa5 + "\n");

    hsaBlock ++;
    hsaIds.push(hsaNum);

这是单击“删除”按钮后删除行的功能。

function removeRow(removeNum,hsaNum)
 {
    // Remove from array
    var index = hsaIds.indexOf(hsaNum);
    if (index > -1) {
        hsaIds.splice(index, 1);

        if(hsaNum == 3)
        {
            hasHsa3 = false;
        }
        else if(hsaNum == 4)
        {
            hasHsa4 = false;
        }
        else if(hsaNum == 5)
        {
            hasHsa5 = false;
        }
    }

    updateHSATable();

    $('.hsaBlock'+removeNum).remove();

};

Answer 1

根据我的理解，我不知道你的实际代码是什么，我认为你会尝试做类似下面的事情。对于添加元素，我使用appendChild()并删除使用removeChild()的元素。希望这有帮助。

＆＃13;

function add(){
    var node = document.createElement("LI");
    var len = document.querySelectorAll("ul li") 
    var textnode = document.createTextNode(len.length+1);
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);
}

function delete1(){
    var len = document.querySelectorAll("ul li");
    if(len.length>0){
      len[0].parentElement.removeChild(len[len.length-1]);
    }
}

＆＃13;

<button onclick="add()">Add</button>
<button onclick="delete1()">Delete</button>
<ul id="myList">
  <li>1</li>
  <li>2</li>
</ul>

＆＃13;

javascript动态添加和删除html部分

1 个答案: