Question

通常我使用这个jquery：

$( ".product_imgfiles a" ).click(function(event) {
   $( this ).parent( "div" ).remove();
});

但是，它仅适用于文档就绪，而不适用于新的附加元素。然后我换成了这个：

$(document).on("click", ".product_imgfiles a", function() {
   $( this ).parent( "div" ).remove();
});

但是，在第二个，我的代码没有删除div。我在这个论坛上阅读了一些帖子并修改为一些组合：

$( this ).prev().parent( "div" ).remove();
$( this ).parent( "div" ).prev().remove();
$( this ).parent().prev( "div" ).remove();

他们都没有成功删除当前.product_imgfiles的父div。在这种情况下如何正确选择？

更新：HTML结构

<div id="product_imgfiles_container" class="row">
    <?
        if (isset ($product_imgfiles)) {
            for ($i=2; $i<($num_product_imgfiles+2); $i++) {
                echo '<div class="col-xs-4 col-md-2" style="padding-left: 7px; padding-right: 7px;">
                        <div class="thumbnail product_imgfiles">
                            <img src="'. $directory . $product_imgfiles[$i] .'" style="margin-bottom: 5px;">
                            <a href=""><span><i class="fa fa-times-circle"></i> hapus</span></a>
                        </div>
                    </div>';
            }
        }
    ?>
</div>

Answer 1

事件处理程序中的

$(this)引用了单击的<a>元素。要获得最近的祖先，请使用closest()。

$(this)                           // Clicked anchor element
    .closest('.product_imgfiles') // Get closest ancestor having that class
    .parent()                     // Get direct parent
    .remove();                    // Remove from DOM

我建议将一个类添加到.product_imgfiles元素的父级，并使用它从DOM中删除该元素。

<强> HTML：

echo '<div class="col-xs-4 col-md-2 productContainer"> ...
//                                  ^^^^^^^^^^^^^^^^  Add this class

<强> JavaScript的：

$(this).closest('.productContainer').remove();

Answer 2

制作

product_imgfiles

您需要删除private static Properties props = null; public static void load(String configFilePath) { InputStream is = ClassLoader.getSystemResourceAsStream(configFilePath); props = new Properties(); props.load(is); is.close(); } public static String getValueByKey(String key) { String propertyValue=null; if(props.containsKey(key)) { propertyValue = props.getProperty(key); } return propertyValue; } div。

的父级

Answer 3

您已使用href=""的锚标记，以便在点击时刷新您的网页，这就是您没有删除div的原因。只需在.remove（）调用之前添加e.preventDefault();，如下所示：

$(document).on("click", ".product_imgfiles a", function(e) {
    e.preventDefault();
    $( this ).parent().parent().remove();// remove the div containing the div.product_imgfiles
});

jQuery：如何正确选择.parent .prev？

3 个答案: