原型：onclick 删除前一个元素答案

【问题标题】：prototype : onclick remove previous element原型：onclick 删除前一个元素
【发布时间】：2013-08-23 11:10:06
【问题描述】：

我有如下的 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();
}

【问题讨论】：

可以分享remove()函数的内容吗？您是要求其他人为您编写，还是要求朝着正确的方向前进？

标签： prototypejs prototype

【解决方案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();
}

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

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

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

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

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

卡尔..

【讨论】：