css - 实现用于删除的 css 按钮不起作用

Question

我的节点/express 文件中有以下代码:

             {{#each allimages}}
        <div class="col m3 14">
            <div class="card hoverable">
                <div class="card-image">
                    <a href="/uploads/{{imageName}}" data-lightbox="mygallery" data-title="This is a test">
                        <img src="/uploads/{{imageName}}">
                    </a>
                </div>

                <div class="card-action2 right-align">
                    <form action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light red">
                            <i class="material-icons">delete</i>
                        </button>
                    </form>
                    <form action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light blue">
                            <i class="material-icons">edit</i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {{/each}}

我可以看到我的删除按钮是红色的，但是当我点击它时它并没有删除文件。当我使用并且类型设置为提交时，它与我的路线完美配合并删除了文件。如何使用 materialize css delete 样式提交我的删除请求表单？

感谢大家的帮助!

Answer 1

你需要让它成为一个按钮，而不是一个 anchor 。您只需添加相关的类定义即可使用 Materialize 按钮的样式:

<div class="card-action2 right-align">
  <form action="/user/{{id}}?_method=DELETE" method="POST">
    <button type="submit" class="btn-floating btn waves-effect waves-light red">
      <i class="material-icons">delete</i>
    </button>
  </form>

  <a href="2.html">
    <i class="material-icons blue-grey-text">edit</i>
  </a>
</div>