0

以下のようなhtmlがあり、<a>その上のテキストボックスを削除したいのです。

<input class="sku-box" class="input-text validate-number" type="text" title="file-number" name="sku[]">
<a value="remove" onclick="remove()" href="javascript:void(0);">remove</a>
<input class="sku-box" class="input-text validate-number" type="text" title="file-number" name="sku[]">
<a value="remove" onclick="remove()" href="javascript:void(0);">remove</a>

これに対する私の解決策、<a>タグをこれに変更しました。

<a href="javascript:void(0);" onclick="removefield(this)" value="remove">remove</a>

私のプロトタイプ関数は次のようになります

function removefield(ele)
{
    $(ele).previous().remove();
    ele.remove();
}
4

1 に答える 1

1

クリックイベントを観察するためのいくつかのオプションがあり、通常、次のようなものを使用して、dom がロードされた後にクリックイベントを結び付けます:

document.on('click', 'a', myFunction.BindAsEventListener())

上記のステートメントは、関数 myFunction を起動する要素に対して発生するすべてのクリック イベントを監視するように設定します。これが確立されたら、イベントをトラップするか、単純にバブルアップさせるか、イベントのトラップとバブルアップの両方を行うことができます。

ただし、そこに向かう方向では、タグの ID を remove 関数に渡す方がよいでしょう。そうすれば、前の要素を簡単に削除できます。したがって、次のようになります。

<a id="a_tag1" value="remove" onclick="remove('a_tag1')" href="javascript:void(0);">remove</a>

次に、関数 remove は次のようになります。

function remove(a) {
    // prev element
    var elm = $(a).previous('input');

   // remove it
    if(elm)
      elm.remove();
}

これは非常に基本的なことであり、実際には、取得している前の入力要素がクリックした要素に関連付けられていることを保証するために何かを行う必要があります。これは、要素を比較するために使用できる新しい data-xxxx 要素タグまたは任意のクラス名に同意することで実現できます。たとえば、タグは次のようになります。

<a data-group='monkeys'>...</a>

対応する入力タグは次のようになります。

<input data-group='monkeys'>...</input>

次に、a タグで previous を呼び出す上記のコードでは、現在の a タグに一致するデータ グループ値のテストを含めるように select を作成します。

カール..

于 2013-08-23T19:18:21.103 に答える