从动态表单中删除多个元素的小型Javascript问题

如果可能的话，有人可以告诉我我在做什么错吗？

我们在php页面上有一个带有javascript的基本表单，当单击按钮时会创建4个表单字段。

如果多次单击该按钮，它将继续创建4列的行。问题是，如果有人单击该按钮，则试图删除该行（4个元素），我只能在需要删除该行中所有4个元素（输入）的地方删除它，

JAVASCRIPT

var i = 0; /* Set Global Variable i */
function increment() {
    i += 1; /* Function for automatic increment of field's "Name" attribute. */
}

//Function to Remove Form Elements Dynamically
function removeElement(parentDiv, childDiv) {
    if (childDiv == parentDiv) {
        alert("The parent div cannot be removed.");
    } else if (document.getElementById(childDiv)) {
        var child = document.getElementById(childDiv);
        var parent = document.getElementById(parentDiv);
        parent.removeChild(child);
    } else {
        alert("Child div has already been removed or does not exist.");
        return false;
    }
}

//Functions that will be called upon, when user click on the Name text field.
function nameFunction() {
    var r = document.createElement('span');
    var y = document.createElement("INPUT");
    y.setAttribute("type", "text");
    y.setAttribute("placeholder", "Name");
    var g = document.createElement("IMG");
    g.setAttribute("src", "img/delete.png");
    increment();
    y.setAttribute("Name", "quantityordered_" + i);
    r.appendChild(y);
    g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
    r.appendChild(g);
    r.setAttribute("id", "id_" + i);
    document.getElementById("myForm").appendChild(r);


    var r = document.createElement('span');
    var y = document.createElement("INPUT");
    y.setAttribute("type", "text");
    y.setAttribute("placeholder", "QTY Delivered");
    var g = document.createElement("IMG");
    g.setAttribute("src", "img/delete.png");
    increment();
    y.setAttribute("Name", "quantitydelivered_" + i);
    r.appendChild(y);
    g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
    r.appendChild(g);
    r.setAttribute("id", "id_" + i);
    document.getElementById("myForm").appendChild(r);

    var r = document.createElement('span');
    var y = document.createElement("INPUT");
    y.setAttribute("type", "text");
    y.setAttribute("placeholder", "Description");
    var g = document.createElement("IMG");
    g.setAttribute("src", "img/delete.png");
    increment();
    y.setAttribute("Name", "description_" + i);
    r.appendChild(y);
    g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
    r.appendChild(g);
    r.setAttribute("id", "id_" + i);
    document.getElementById("myForm").appendChild(r);

    var r = document.createElement('span');
    var y = document.createElement("INPUT");
    y.setAttribute("type", "text");
    y.setAttribute("placeholder", "Price ie; £15.00");
    var g = document.createElement("IMG");
    g.setAttribute("src", "img/delete.png");
    increment();
    y.setAttribute("Name", "price_" + i);
    r.appendChild(y);
    g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
    r.appendChild(g);
    r.setAttribute("id", "id_" + i);
    document.getElementById("myForm").appendChild(r);
}

//Functions that will be called upon, when user click on the Reset Button.
function resetElements() {
    document.getElementById('myForm').innerHTML = '';
}

的HTML

<div class="col-md-12" style="margin-top:20px; padding-left:30px;">
    <button type="button" onclick="nameFunction()" class="btn btn-info">
      <i class="fa fa-plus"></i> 
      Add another Item
    </button>
</div>

我希望这有帮助？请注意Iam是JS的新手，并认为这将是深入研究etc的绝佳项目。

在此先非常感谢任何人可以提供的任何建议