0

onClick で DOM 要素を作成する関数があります。その要素には、配列名を持つ入力が含まれています。

最初に、すでに 1 つの要素があります (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>');
}

この追加要素onClickを削除する関数 (deleteElement) を作成したいと思います。

要素を削除した後、その関数ですべての要素の値と ID を並べ替えます。たとえば、要素番号 2 を削除すると、3 番目の要素の値と ID は 2 になる必要があります。

JQueryではありません。

それを手伝ってください！

4

2 に答える 2

1

関連するすべての要素の配列を作成する必要があります。対象から最後まで削除します。配列からターゲットを削除します 配列の番号を付け直します 次に、残っているものを追加します。それが私だったら、別の ElementID (DisplayElmentID ?) を持つことを検討していたので、このすべてを行う必要はありません。つまり、DOM で使用される ID 属性はそのままにしておきます。

于 2012-06-03T12:05:46.760 に答える
0

助けてくれてありがとう@Esailja！解決策（フィドル）：

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-03T14:01:42.647 に答える