Question

我有一个在onClick上创建DOM元素的函数。该元素包含数组名称的输入。

一开始我已经有一个元素（与我在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。

请帮助我！

Answer 1

您将构建一个包含所有元素的数组。删除从目标到结束。从阵列中删除目标在数组中重新编号然后添加左边的内容。如果是我，我会考虑使用其他ElementID（DisplayElmentID？），那么你就不必做所有这些事了。即保留DOM所使用的ID attibute

Answer 2

感谢@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>

删除动态元素并重新排序这些元素值和ID

2 个答案: