0

テキストエリアがあり、その横に「別のテキストエリアを追加」と「このテキストエリアを削除」という2つのボタンがあります

ここに私のhtmlコードがあります:

<div id="summaryIn">
                            <label for="">Summary of Experience:</label> 
                            <textarea class="TA1" name="mySummary[]" value=""></textarea>
                            <button class="adddel" name="cmdDelSummary[]" id="cmdDelSummary" title="Delete this Summary" onClick="DelSummary('summaryIn');">-</button> 
                            <button class="adddel" id="cmdAddSummary" title="Add Another Summary" onClick="AddSummary('summaryIn');">+</button>
                        </div>

テキストエリアを追加するための私のJavaScript関数は正常に機能しますが、削除ボタンはうまく機能しません。JavaScriptコードは次のとおりです。

function DelSummary(divName){
alert(summary_counter);
if (summary_counter == 1)
{
    document.getElementById('cmdDelSummary').disabled=true;
}
else
{
    summaryIn.removeChild(summaryIn.lastChild);
    summary_counter--;
    //alert(summary_counter);
}

}

私はかなり長い間これを理解しようとしてきましたが、今まで解決策が見つかりませんでした。. .私は追加の削除ボタンをインデックス化/参照する方法がわからないので、removeChildがその特定のテキストエリアのみを削除し、常にlastChildを削除するわけではありません..事前に非常に感謝します:)

4

2 に答える 2

1

追加する必要があると思います

summaryIn = document.getElementById(divName);

前

summaryIn.removeChild(summaryIn.lastChild);
于 2011-06-20T00:27:18.003 に答える
0

この行：

summaryIn.removeChild(summaryIn.lastChild);

要素名と id を要素を参照するグローバル変数にする慣行に依存しているようです。これは、すべてのブラウザーで実装されているわけではない非標準の慣行です。

代わりに、標準に準拠したものを使用してください。

var  summaryIn = document.getElementById('summaryIn');

これで、そのremoveChildメソッドを呼び出すことができます。最初は「別のサマリーを追加」ボタンが最後の要素の子であるため、削除しようとしているものも確認する必要があります。

編集

慣例により、大文字で始まる関数名は構築者用に予約されているため、小文字を使用しました。

ドキュメントから div とそのコンテンツを削除するには:

// Go up DOM until reach parent element with tagName
// If no such node found, return undefined.
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el.parentNode) {
    el = el.parentNode;

    if (el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
}

function delSummary(el){
  var div = upTo(el, 'div');
  div.parentNode.removeChild(div);
}

そして、次のように呼び出します。

  <button ... onclick="delSummary(this);" ...>-</button>

HTML 属性名は大文字と小文字を区別しませんが、キャメル ケースを使用すると読みにくくなるため、小文字を使用します。

于 2011-06-20T00:35:37.917 に答える