刪除動態元素並重新排序這些元素值和ID的

我有一個函數可以創建一個DOM元素onClick。該元素包含陣列名稱的輸入。刪除動態元素並重新排序這些元素值和ID的

在開始我已經有一個元素（像我創建onClick相同）。

<tbody id="elementsBody"> 

<tr id="element1"> // 1 becomes 2 and so on when new element is added 
    <td> 
    <input type="hidden" name="numbers[]" value="1" /> // 1 becomes 2 and so on when new element is added 
    </td> 
    <td> 
    <input type="text" name="titles[]" /> 
    </td> 
</tr> 

// Newly created Elements goes in here!!! 

</tbody>

這是我的功能，它創建了更多的元素，像上面那樣。

而且爲這個新創建的元素創建刪除按鈕DIV。

function addElement() { 
    var elementsBody = document.getElementById('elementsBody'); 

    var numbers = document.forms[1].elements['numbers[]']; 
    var number = numbers.length+1; 

    if (isNaN(number)) { 
    var number = 2; 
    } 

    var numberInput = '<td><input type="hidden" name="numbers[]" value="'+ number + '" /></td>'; 
    var titleTd = '<td><input type="text" name="titles[]" /></td>'; 

    // This is the Delete Button DIV 
    // I want to create a function (deleteElement) which Removes This Element 
    var deleteButton = '<td><div onClick="deleteElement('+ number + ')">Delete Element</div></td>'; 

    elementsBody.insertAdjacentHTML('beforeend', '<tr id="element' + number + '">' + numberInput + titleTd + deleteButton + '</tr>'); 
}

我想創建一個函數（deleteElement），它刪除該添加元素的onClick。

移除一個元素後，我希望該函數對重新排列所有元素值和ID的。例如，如果我刪除元素編號2，則第三個元素的值和ID必須爲2.

不是JQuery。

請幫助我！

來源

2012-06-03 Hypn0tizeR

你嘗試過什麼？你到底需要什麼幫助？獲取對元素的引用？一旦你有一個參考去除元素？還有別的嗎？（我不知道'insertAdjacentHTML'，但[它確實存在]（https://developer.mozilla.org/en/DOM/Element.insertAdjacentHTML））。 –

我想不是jQuery，@Felix ;-) – Arjan

@FelixKling，類似的東西！還要重新編號所有其餘元素。 – Hypn0tizeR

謝謝@Esailija求助！解決方案（fiddle）：

function addElement() { 
 
    var elementsBody = document.getElementById('elementsBody'); 
 

 
    var numberInput = '<td><input type="hidden" name="numbers[]" value="" /></td>'; 
 
    var titleTd = '<td><input type="text" name="titles[]" /></td>'; 
 
    var deleteButton = '<td><div onClick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); update();">Delete Element</div></td>'; 
 

 
    elementsBody.insertAdjacentHTML('beforeend', '<tr>' + numberInput + titleTd + deleteButton + '</tr>'); 
 
    update(); 
 

 

 
} 
 

 
function update() { 
 
    var inputs = document.getElementById('elementsBody').querySelectorAll("input[type='text']"); 
 
    [].forEach.call(inputs, function(input, index) { 
 

 
    input.value = index + 1; 
 
    }); 
 
}

<table> 
 
    <tbody id="elementsBody"> 
 

 
    <tr> 
 
     <td> 
 
     <input type="hidden" name="numbers[]" value="1" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="titles[]" /> 
 
     </td> 
 
    </tr> 
 

 

 

 
    </tbody> 
 
</table><button onclick="addElement();">add</button>

來源

2012-06-03 14:01:42 Hypn0tizeR

你將要建立一個涉及所有元素的數組。刪除從目標到結束。從數組中刪除目標在數組中重新編號然後添加左側的內容。如果是我，我會看着有一個其他的ElementID（DisplayElmentID？），那麼你不必做所有這些東西。即離開DOM所使用的ID屬性，單獨發現

來源

2012-06-03 12:05:46

問題是如何？：/ – Hypn0tizeR

@Esailija，他已經幫我編碼了！感謝他！ – Hypn0tizeR

刪除動態元素並重新排序這些元素值和ID的

回答

相關問題