獲取div的父母的父母

Question

我已經搜索並嘗試了很多事情來做到這一點，如closest()和parents()和parent()和find()但我無法讓它工作。

我有這個網站

<div class='message_holder area2 user45 chatid32'> 
    <a class='avatar' title='jhon'> 
     <img height='28px' width = '28px' src="link to image" /> 
    </a> 
<div class='flag_holder'> 
    <div class='edited png32'></div> 
    <div class=' png32'></div> 
</div> 
<div class='message user_chat'> hghgghgh</div> 
<div class='like_holder'> 
    <div class='chattime'>02-12 22:16</div> 
    <div class='likepng'></div> 
    <div class='likescore'>5</div> 
    <div class='unlikescore'>0</div> 
    <div class='unlikepng'></div> 
    <div class="like"> 
     <div class="editpng"></div> 
     <div class="deletepng"></div> 
    </div> 
</div> 
</div> 

所以，我想要的是當我點擊的DIV類deletepng我要刪除的兩個div unlikepng和likepng。

這個js

$(document).on ("click", ".deletepng", function() { 
     $this = $(this); 
    //alert($this.closest(".like").html()); I could just make this to work 
    // alert($this.parents(".like_holder").html()); wont work 
    // alert($this.closest(".like_holder").html()); wont work 
    // alert($this.parent().parent().html()); wont work 
    // alert($this.closest(".like_holder").find(".like_holder").html()); wont work 
}); 

我只是想知道爲什麼他們不工作，我的那些嘗試。哪裏可能是我的錯誤？

編輯：

我不知道這是否有作用還是不行，我有什麼，我試圖在對話框內像

$(document).on ("click", ".deletepng", function() { 
$this = $(this); 
$('<div>' + c_delete + '</div>').dialog({ 
    resizable: false, 
    buttons: { 
    "Yes": function() { 
     chat_text_h.html('<div class="removed"> Removed</div>'); // do something here 
     $(this).dialog("close"); 

     //alert($this.closest(".like").html()); I could just make this to work 
     // alert($this.parents(".like_holder").html()); wont work 
     // alert($this.closest(".like_holder").html()); wont work 
     // alert($this.parent().parent().html()); wont work 
     // alert($this.closest(".like_holder").find(".like_holder").html()); wont work 
    } 
    } 
}); 
}); 

Answer 1

使用closest然後用第二個參數作爲上下文。

$(document).on("click", ".deletepng", function() { 
 
    var $holder = $(this).closest('.like_holder'); 
 
    $('.likepng, .unlikepng', $holder).remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='message_holder area2 user45 chatid32'> 
 
    <a class='avatar' title='jhon'> 
 
    <img height='28px' width='28px' src="link to image" /> 
 
    </a> 
 
    <div class='flag_holder'> 
 
    <div class='edited png32'></div> 
 
    <div class=' png32'></div> 
 
    </div> 
 
    <div class='message user_chat'>hghgghgh</div> 
 
    <div class='like_holder'> 
 
    <div class='chattime'>02-12 22:16</div> 
 
    <div class='likepng'>like</div> 
 
    <div class='likescore'>5</div> 
 
    <div class='unlikescore'>0</div> 
 
    <div class='unlikepng'>unlike</div> 
 
    <div class="like"> 
 
     <div class="editpng"></div> 
 
     <div class="deletepng">delete</div> 
 
    </div> 
 
    </div> 
 
</div>

編輯

由於您的更新，您需要設置一個全局變量來記住$this或容器/支架。試試這個： -

var $holder; 

$(document).on("click", ".deletepng", function() { 

    $holder = $(this).closest('.like_holder'); 

    $('<div>' + c_delete + '</div>').dialog({ 
    resizable: false, 
    buttons: { 
     "Yes": function() { 
     chat_text_h.html('<div class="removed"> Removed</div>'); 
     $(this).dialog("close"); 

     $('.likepng, .unlikepng', $holder).remove(); 
     } 
    } 
    }); 
}); 

Answer 2

$this.closest(".like").html(); =>這將返回父DIV的HTML ，刪除按鈕在哪裏。不刪除元素

$this.parents(".like_holder").html() =>這將返回html的div.message_holder。不刪除元素。

$this.closest(".like_holder").html() =>這將在div.like_holder返回div.like_holder $this.parent().parent().html();接近enogh html，但like_holder類仍然遠遠=>html的div.like_holder $this.closest(".like_holder").find(".like_holder").html();返回NULL =>無子元素。

例如種類

$(document).on ("click", ".deletepng", function() { 
 
     var $parent = $(this).parent().parent(); 
 
     $parent.find('.likepng').remove(); 
 
     $parent.find('.unlikepng').remove(); 
 
     
 
});

.deletepng{ 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='message_holder area2 user45 chatid32'> 
 
    <a class='avatar' title='jhon'> 
 
     <img height='28px' width = '28px' src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" /> 
 
    </a> 
 
<div class='flag_holder'> 
 
    <div class='edited png32'></div> 
 
    <div class=' png32'></div> 
 
</div> 
 
<div class='message user_chat'> hghgghgh</div> 
 
<div class='like_holder'> 
 
    <div class='chattime'>02-12 22:16</div> 
 
    <div class='likepng'> like me</div> 
 
    <div class='likescore'>5</div> 
 
    <div class='unlikescore'>0</div> 
 
    <div class='unlikepng'> unlike me</div> 
 
    <div class="like"> 
 
     <div class="editpng"></div> 
 
     <div class="deletepng">delete button</div> 
 
    </div> 
 
</div> 
 
</div>

---

UPDATE

如果你想從對話框，或其他的東西讓 - 你不能使用this變量。這沒有任何意義。你應該提供unique id您message_box，然後使用它，就像 $(id_of_message_box).find('.likepng, .unlikepng').remove()

或者我可以從你的代碼中看到：

var $parent = $this.parent().parent(); 
     $parent.find('.likepng, .unlikepng').remove(); 

這意味着你應該在你的函數中使用$this代替$(this)

Answer 3

您可以訪問您的$（this）的父母父母，如：

var likeholder; 

likeholder = $(this).parent().parent(); 

但是，這通常是不好的建議。不過你會有一個jQuery對象。

讓我知道你上車

Answer 4

試試這個，你需要父母的兄弟姐妹;

alert($this.closest(".like").parent().find(".unlikescore").html()); 
alert ($this.closest('.like').siblings('.unlikepng').html()) ; 

工作js fiddle

Answer 5

爲了選擇一個元素的父的家長，你試試這個：

$(document).on ("click", ".deletepng", function() { 


    alert($($(this).parent()).parent().html()); 

}); 

既然你只能執行jQuery的對象的父（）方法。 以下是與您的代碼無關的示例。 JSFiddle。