Question

我有html如下所示<a> onclick我要删除它上方的文本框。

<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();
}

Answer 1

您可以通过多种方式观察点击事件，通常我会在使用以下内容加载dom后点击点击事件：

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

上面的语句设置为观察触发函数myFunction的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();
}

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

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

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

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

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

卡尔..

prototype：onclick删除前一个元素

1 个答案: