Question

我上周提交了这个问题：

chrome not working with jquery remove

并且能够解决它（真的是我的愚蠢），但是我的例子非常简单。目前我正在尝试使用.remove在将输入数组发送到ajax函数之前从页面中消除完整的div。但是，我无法让.remove完全工作。

这是我最近的尝试： http://jsfiddle.net/CJ2r9/2/

我在多个浏览器上的jsfiddle上没有定义函数。在我的应用程序中，我绝对没有错误，但也没有任何作用。

我对javascript范围相对较新，所以如果问题是范围问题那么请告诉我我是如何搞砸的。

我也尝试过使用.on jquery函数，但考虑到我的div id是从服务器动态加载的（jstl，spring MVC等），它会有点混乱。如果这是一个解决方案，请告诉我如何走上正确的轨道。

谢谢！

Answer 1

我看到你已经在使用jquery了。为什么不这样做：

<div id="foo">This needs to be removed</div>
<a href="#" id="remove" data-remove="foo">Remove</a>

function removeElem(element){
    $('#'+element).remove();
}

$(function(){
    $("#remove").click(function(){
        removeElem($(this).data('remove'));
    });
})

在这里小提琴：http://jsfiddle.net/vLgpk/

它们的工作方式是，使用data-remove（可以像data-xyz顺便说一句），将删除链接与div绑定。然后，您可以在稍后单击删除时读取此绑定。

如果您不熟悉jQuery，并想知道data-remove是什么，它只是您可以添加到代码中的自定义属性，以后可以使用元素上的data()调用来检索。像Bootstrap这样的许多优秀框架都使用这种方法。

在我看来，使用这种方法的好处是你可以在你的UI中的任何地方删除链接，并且不需要通过在其中选址来在结构上与你的div相关联。

Answer 2

你的jsFiddle中的两个问题是：

范围：removeElem不在全局范围内，因为您保留了默认配置选项以在DOM就绪上执行代码。您可以将其更改为“无包装”以使功能全局化。
您要删除的元素不存在。 div元素具有“removeXXXp”之类的ID，并且在事件处理程序中传递“removeXXXs”。

这是另一个更简单的解决方案（在我看来），用于删除元素。鉴于你的加价：

<div class="scheduleSet" id="remove315p">
    <!-- ... -->
    <a href="javascript:void(0);" class="optionHide">Remove</a>
</div>

你可以这样使用.on：

$('.schduleSet a.optionHide').on('click', function() {
    // traverses up the DOM tree and finds the enclosing .schduleSet element
    $(this).closest('.scheduleSet').remove();
});

你根本不需要身份证。

Answer 3

我做了一个简单的小提琴，内联onclick没有看到javascript中定义的函数，所以我得到了ReferenceError: myRemove is not defined。

通过在js中添加监听器，.remove()可以正常工作。

抱歉，我不知道导致行为差异的原因。

测试出来：http://jsfiddle.net/xTv5M/1/

// HTML5
<div id="removeme">foo bar</div>
<button onclick="myRemove('removeme')">Go</button><br>
<div id="removeMe2">foo bar</div>
<button id="go2">Go Again</button>

// js
function myRemove(name){
    $('#'+name).remove()
};

$('#go2').click(function(){ myRemove('removeMe2') });

Jquery删除函数跟进

3 个答案: