Question

我想在点击按钮时删除或隐藏div。问题是我有很多div，我想删除我点击按钮的特定div。

我的divs：

              <div class="col-sm-4 col--remove">
                    <div class="post post--preview">
                        <form class="akcje_konkretne" method="post">
                        <button type="submit" name="usun" value="usun" class="btn read-more post--btn usun">usuń</button>
                        </form>
                    </div>
              </div>

              <div class="col-sm-4 col--remove">
                    <div class="post post--preview">
                        <form class="akcje_konkretne" method="post">
                        <button type="submit" name="usun" value="usun" class="btn read-more post--btn usun">usuń</button>
                        </form>
                    </div>
              </div>

              <div class="col-sm-4 col--remove">
                    <div class="post post--preview">
                        <form class="akcje_konkretne" method="post">
                        <button type="submit" name="usun" value="usun" class="btn read-more post--btn usun">usuń</button>
                        </form>
                    </div>
              </div>

              <div class="col-sm-4 col--remove">
                    <div class="post post--preview">
                        <form class="akcje_konkretne" method="post">
                        <button type="submit" name="usun" value="usun" class="btn read-more post--btn usun">usuń</button>
                        </form>
                    </div>
              </div>

我的jQuery：

$('form.actionlist').submit(function(e) {
        e.preventDefault();
        var $form = $(this);

     //Tried with:
$(this).hide();
$(this).closest('.col-sm-4 col--remove').hide();
$('.col-sm-4 col--remove').hide();

     });

不知道怎么做，我怎么能隐藏我点击按钮的div？

Answer 1

你非常接近。两个问题：

您将submit()事件处理程序附加到归类为actionlist的表单，但您的表单实际上归类为akcje_konkretne。
您的closest()选择器（“.col-sm-4 col--remove”）包含空格，但不包含第二个.。如上所述，这将查找归类为“col-sm-4”的最近元素中的“col-remove”元素。相反，您试图寻找归类为 “col-sm-4”和“col - remove”的最接近的元素：closest('.col-sm-4.col--remove')。

但是还有更好的方法......

如果您想要外部 div ，请尝试：

$('form.akcje_konkretne').submit(function(e) {
   e.preventDefault();
   $(this).closest('div.col--remove').hide(); //or remove(), if that's what you want
});

我猜测.col--remove类用于表示“这是你要移除的div”。

你可以view this approach in action（注意外部div有一个红色边框，内部div有一个蓝色边框）。

如果您想要最接近的 div （立即包裹form提交的那个），请尝试：

$('form.akcje_konkretne').submit(function(e) {
   e.preventDefault();
   $(this).closest('div').hide(); //or remove(), if that's what you want
});

你可以view this approach in action。

Answer 2

只是一个小错误：

$(this).closest('.col-sm-4.col--remove').hide();

控件具有两个类，因此您需要在选择器中对其进行链接。

单击该div中的按钮后隐藏div

2 个答案: