從動態表單中刪除多個元素的小型Javascript問題

任何人都可以在這裏如果可能的話在我這裏做錯了什麼？從動態表單中刪除多個元素的小型Javascript問題

我們在一個帶有javascript的php頁面上有一個基本表單，當點擊一個按鈕時會創建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>

我希望這可以幫助？請注意蔭新JS，並認爲這將是一個偉大的工程潛入等

很多感謝的任何建議誰能給

來源

2016-05-12 carl

你只是刪除一個è字元素。你是否使用相同的ID創建新的'div'？ – Wainage

不，我認爲它只是創造的元素，可能在一個跨度，這是最初的代碼從一個教程，我已經適應套件，但仍有很多要了解JS大聲笑，所以不能過分確定是誠實的答案 – carl

當一個新行添加4個輸入它分配一個id ie; name_1 name_2等 – carl

插入所有4個輸入到一個「容器」 - 你可以通過移除一個容器將其全部刪除。

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(childId) { 
 
    // Simplify form - only need a childId 
 
    if (document.getElementById(childId)) { 
 
     var child = document.getElementById(childId); 
 
     child.parentNode.removeChild(child); 
 
    } 
 
} 
 

 
//Functions that will be called upon, when user click on the Name text field. 
 
function nameFunction() { 
 

 
    // Create a container for all 4 inputs 
 
    var container = document.createElement('div'); 
 
    var containerId = 'id_' + i; 
 
    container.id = containerId; 
 
    increment(); 
 

 
    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"); 
 
    g.setAttribute("onclick", "removeElement('" + containerId + "')"); 
 
    y.setAttribute("Name", "quantityordered_" + i); 
 
    r.appendChild(y); 
 
    r.appendChild(g); 
 
    container.appendChild(r); 
 
    increment(); 
 

 

 
    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"); 
 
    g.setAttribute("onclick", "removeElement('" + containerId + "')"); 
 
    y.setAttribute("Name", "quantitydelivered_" + i); 
 
    r.appendChild(y); 
 
    r.appendChild(g); 
 
    container.appendChild(r); 
 
    increment(); 
 

 
    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"); 
 
    g.setAttribute("onclick", "removeElement('" + containerId + "')"); 
 
    y.setAttribute("Name", "description_" + i); 
 
    r.appendChild(y); 
 
    r.appendChild(g); 
 
    container.appendChild(r); 
 
    increment(); 
 

 
    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"); 
 
    g.setAttribute("onclick", "removeElement('" + containerId + "')"); 
 
    y.setAttribute("Name", "price_" + i); 
 
    r.appendChild(y); 
 
    r.appendChild(g); 
 
    container.appendChild(r); 
 
    increment(); 
 

 
    // Append container to form 
 
    document.getElementById("myForm").appendChild(container); 
 
} 
 

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

<div id="myForm" 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>

來源

2016-05-12 12:40:53

多麼令人驚歎！第一次工作完美！最重要的是我在這裏學到了一些東西，我沒有意識到它可以簡單地實現，非常感謝，非常感謝。 – carl

我認爲最好的辦法是將所有的四個創建的元素放到周圍div，給它一個id和id將其刪除。

但是，如果你想保留當前結構，你可以通過類名刪除它們。

1），用於從i生成的類名（假設nameFunction創建4種元素）創建一個功能：

function getClassName(i) { 
     return "name_spans_" + ~~((i - 1)/4); 
    }

2）每次通話後添加一類到每個所生成的跨度increment()：

increment(); // after this line 
r.className += getClassName(i);

3）修改onclick處理器來傳遞最後生成的跨度i：

g.setAttribute("onclick", "removeElement('myForm'," + i + ")");

4）修改removeElement函數刪除所有元素與對應於傳遞i類名：

function removeElement(parentDiv, i) { 
    var parent = document.getElementById(parentDiv); 
    var children = [].slice.call(document.getElementsByClassName(getClassName(i))); 

    for (var c = 0; c < children.length; ++c) { 
     parent.removeChild(children[c]); 
    } 
}

來源

2016-05-12 12:41:32

另一個偉大的答案，感謝buddy真的有幫助 – carl

我的響應similare到@ user3153664一個，但我simplifiend「創造元件」相到一個功能和tryed清潔代碼...

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; 
 
    } 
 
} 
 

 
function createInputElement(row, placeholder, name) { 
 
    var y = document.createElement("INPUT"); 
 
    y.setAttribute("type", "text"); 
 
    y.setAttribute("placeholder", placeholder); 
 
    
 
    var g = document.createElement("IMG"); 
 
    g.setAttribute("src", "img/delete.png"); 
 
    g.setAttribute("alt", "X"); 
 
    y.setAttribute("Name", name); 
 
    
 
    var r = document.createElement('span'); 
 
    r.appendChild(y); 
 
    g.onclick = function() { removeElement('myForm', row.getAttribute('id')) }; 
 
    r.appendChild(g); 
 
    
 
    return r; 
 
} 
 

 
//Functions that will be called upon, when user click on the Name text field. 
 
function nameFunction() { 
 
    var row = document.createElement('P'); // a set of 4 elements to be delete together 
 
    
 
    increment(); 
 
    row.setAttribute("id", "id_" + i); // set the row id with the value of i 
 
    row.appendChild(createInputElement(row, 'Name', 'quantityordered_'+i)); 
 
    
 
    increment(); 
 
    row.appendChild(createInputElement(row, 'QTY Delivered', 'quantitydelivered_'+i)); 
 
    
 
    increment(); 
 
    row.appendChild(createInputElement(row, 'Description', 'description_'+i)); 
 
    
 
    increment(); 
 
    row.appendChild(createInputElement(row, 'Price ie; £15.00', 'price_'+i)); 
 
    
 
    document.getElementById("myForm").appendChild(row); 
 
} 
 

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

<form id="myForm"> 
 

 
    <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> 
 
</form>

來源

2016-05-12 12:48:17

謝謝Patrick :) – carl

沒問題！我們可以更加強化這些代碼，但我不知道你的需求...... :) –

從動態表單中刪除多個元素的小型Javascript問題

回答

相關問題