0

我有如下的 html，其中 onclick<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 的 a 元素上。一旦确定了这一点，您就可以捕获事件或简单地让它冒泡，或者两者都做，捕获并冒泡事件。

但是，根据您要去的方向，您最好将 a 标签的标识传递给 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();
}

这是非常基本的，实际上您需要做一些事情来保证您抓取的前一个输入元素与您单击的 a 元素相关联。您可以通过同意新的 data-xxxx 元素标记或可用于比较元素的任意类名来做到这一点。例如，您的 a 标签可能如下所示：

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

相应的输入标签可能如下所示：

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

然后，在上面调用 a 标签的 previous 代码中，您将构建您的选择以包含对与当前 a 标签匹配的数据组值的测试。

卡尔..

于 2013-08-23T19:18:21.103 回答