Javascript Onclick删除GSP中的函数问题

在GSP中，我编写了如下代码，它将显示文件列表：

       <g:each in="${fileList}" var="file">
            <div>
                <a href="#" onclick="remove('${file.attachmentId}')"> 
                <span class="glyphicon glyphicon-remove"></span></a> 
                <a href="/forms/landing/attachment/${file.attachmentId}" >${file.name}</a> 
                </br>
            </div>
        </g:each>

我正在调用onclick remove（）函数，将选定的attachmentId作为参数传递。只有在双击其删除文件后才可首次使用

为什么只有在第一次双击后才删除文件

提前谢谢你的帮助

注意：应用程序正在IE中运行。

，因为此标记

<div id="remove">

存在于g:each标记中，则在同一页面中创建多个ID。调用函数remove（）时，它将删除它发现“remove”作为id的所有div。使每个id都唯一，这将解决问题

由于您使用的是jQuery，请尝试使用以下代码。这将消除对唯一id的使用

<script>
        $(document).ready(function(){
            $('.glyphicon-remove').click ( function(e){
                e.preventDefault();
                $(this).parent().parent().remove();
            });
        });
    </script>

$（文档）.ready（函数（）{
$（'.glyphicon remove'）。单击（函数（e）{
e、 预防默认值（）；
$（this.parent（）.parent（）.remove（）；
});
});

自此标记

<div id="remove">

存在于g:each标记中，则在同一页面中创建多个ID。调用函数remove（）时，它将删除它发现“remove”作为id的所有div。使每个id都唯一，这将解决问题

由于您使用的是jQuery，请尝试使用以下代码。这将消除对唯一id的使用

<script>
        $(document).ready(function(){
            $('.glyphicon-remove').click ( function(e){
                e.preventDefault();
                $(this).parent().parent().remove();
            });
        });
    </script>

$（文档）.ready（函数（）{
$（'.glyphicon remove'）。单击（函数（e）{
e、 预防默认值（）；
$（this.parent（）.parent（）.remove（）；
});
});

具有重复的ID值将导致任何DOM（文档对象模型）操作出现问题。您的问题是如何通过浏览器界面从服务器正确删除文件。Groovy可以利用ApacheAnt进行文件操作，并通过使用AntBuilder类简化与文件操作相关的各种任务

请阅读有关使用AntBuilder的内容。 并查看Grails文档中的服务层，以了解如何使用服务。面向服务的体系结构将帮助您保持控制器和域类非常传统，并允许您创建可由多个控制器调用的服务，以实现更具体的功能。如果遵循Grails的约定，那么控制器将已经有了一个

delete

函数。不要在该控制器中添加

deleteFile

方法，而是调用定义

deleteFile

的服务

要删除的代码如下所示：

（例如，项目的服务部分下的FileService.groovy）。在这里，您可以放置用于删除、添加、压缩文本文件的类和函数。通过调用AntBuilder实用程序，利用groovy对ApacheAnt的内置支持

//This is to instantiate an instance of the AntBuilder class.
import groovy.util.AntBuilder

class FileRemover {
    def ant = new AntBuilder() 


    //Define the file, which you will want to pass a value from the page. 
    //You may need to tweak the file path to match your project structure. 

    def file = new File(ant.project.baseDir,
                    "/forms/landing/attachment/${file.attachmentId}")
    def fileName = file.name.toString()
    assert file.exists()

    //Function to remove file
    def fileRemover = file.delete()

    //Provide messaging to let the user know the file has been removed
    println 'File ' + {fileName} + ' has been removed.'
}

此代码需要一些个性化更改才能在您的项目中工作，但是通过阅读答案中链接的文档并遵循代码的基本思想，您应该能够创建一个删除文件的操作，并且可以从GSP页面调用该操作

更新：

---

查看由Thomas Lin阅读的用Grails编写的文件管理器的简单示例。

具有重复的ID值将导致任何DOM（文档对象模型）操作出现问题。您的问题是如何通过浏览器界面从服务器正确删除文件。Groovy可以利用ApacheAnt进行文件操作，并通过使用AntBuilder类简化与文件操作相关的各种任务

请阅读有关使用AntBuilder的内容。 并查看Grails文档中的服务层，以了解如何使用服务。面向服务的体系结构将帮助您保持控制器和域类非常传统，并允许您创建可由多个控制器调用的服务，以实现更具体的功能。如果遵循Grails的约定，那么控制器将已经有了一个

delete

函数。不要在该控制器中添加

deleteFile

方法，而是调用定义

deleteFile

的服务

要删除的代码如下所示：

（例如，项目的服务部分下的FileService.groovy）。在这里，您可以放置用于删除、添加、压缩文本文件的类和函数。通过调用AntBuilder实用程序，利用groovy对ApacheAnt的内置支持

//This is to instantiate an instance of the AntBuilder class.
import groovy.util.AntBuilder

class FileRemover {
    def ant = new AntBuilder() 


    //Define the file, which you will want to pass a value from the page. 
    //You may need to tweak the file path to match your project structure. 

    def file = new File(ant.project.baseDir,
                    "/forms/landing/attachment/${file.attachmentId}")
    def fileName = file.name.toString()
    assert file.exists()

    //Function to remove file
    def fileRemover = file.delete()

    //Provide messaging to let the user know the file has been removed
    println 'File ' + {fileName} + ' has been removed.'
}

此代码需要一些个性化更改才能在您的项目中工作，但是通过阅读答案中链接的文档并遵循代码的基本思想，您应该能够创建一个删除文件的操作，并且可以从GSP页面调用该操作

更新：

要查看用Grails编写的文件管理器的简单示例，请阅读Thomas Lin.

在GSP中的内容：

<g:each in="${fileList}" var="file">
            <div>
                <a href="#" onclick="remove('${file.attachmentId}', this)">
                <span class="glyphicon glyphicon-remove"></span></a> 
                <a href="/forms/landing/attachment/${file.attachmentId}" >${file.name}</a> 
                </br>
            </div>
        </g:each>    

这将完美地解决问题。

在普惠制中：

<g:each in="${fileList}" var="file">
            <div>
                <a href="#" onclick="remove('${file.attachmentId}', this)">
                <span class="glyphicon glyphicon-remove"></span></a> 
                <a href="/forms/landing/attachment/${file.attachmentId}" >${file.name}</a> 
                </br>
            </div>
        </g:each>    

---

这将完美地解决这个问题。

你好@灵药，但问题是：让我们考虑我有3个文件。如果我试图删除第三个文件，第二个文件将被删除。但不是所有的。嗨@elixir我理解我的基本错误，不应该有多个元素具有相同的ID。但现在我把它作为类。如何删除调用onclick的特定元素。Hi@elixir，更新后的解决方案是删除完整的gsp。现在，整个页面被删除。我认为我们已接近解决办法。但不幸的是，更新后的解决方案不适合我。Hi@elixir我更新了答案，它非常适合我的要求。谢谢你的帮助。嗨@elixir，该文件正在从UI中删除，但实际上并没有从后端删除！HyelyxIrror，但问题是：让我们考虑我有3个文件。如果我试图删除第三个文件，第二个文件将被删除。但不是全部。嗨，长生不老药我明白我的基本错误，那就是t