隱藏使用jQuery/Javascript包含的按鈕元素

Question

所以我有一些使用UL列表和幾個LI標籤排列的圖塊。

我想要一個LI標籤內的按鈕，當按下時會隱藏整個瓷磚。

不知道該怎麼去做。 （'li'）。hide（）但我知道那是錯誤的大聲笑。

非常感謝。

<ul class="sortable grid"> 
     <li>Item 1</li><button onclick="hidePane()">Dismiss</button> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
     <li>Item 6</li> 
    </ul> 


<script> 


function hidePane(){ 

    this.hide(); 

} 

</script> 

我希望它是動態的。預期的用途是在許多瓦片中有一個循環。因此，id喜歡它有一個解僱按鈕，每次點擊它只會隱藏瓷磚，當你滾動。

Answer 1

請勿將元素置於li之外。在ul，裏面第一層的元素應該永遠只是li，所以那麼li裏面，你可以把你的按鈕：

$('.sortable button').on('click', function() { 
 
    $(this).parent('li').hide(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="sortable grid"> 
 
    <li>Item 1<button>Dismiss</button></li> 
 
    <li>Item 2<button>Dismiss</button></li> 
 
    <li>Item 3<button>Dismiss</button></li> 
 
</ul>

一個解決方案基於你的代碼，只使用JavaScript會暗示使用event.target以獲得當前點擊按鈕及其父母使用parentElement，並且您還將使用style.display = none;，因爲純0123中沒有hide()方法JavaScript：

function hidePane(event) { 
 
    event.target.parentElement.style.display = 'none'; 
 
}

<ul class="sortable grid"> 
 
    <li>Item 1<button onclick="hidePane(event)">Dismiss</button></li> 
 
    <li>Item 2<button onclick="hidePane(event)">Dismiss</button></li> 
 
    <li>Item 3<button onclick="hidePane(event)">Dismiss</button></li> 
 
    <li>Item 4<button onclick="hidePane(event)">Dismiss</button></li> 
 
    <li>Item 5<button onclick="hidePane(event)">Dismiss</button></li> 
 
    <li>Item 6<button onclick="hidePane(event)">Dismiss</button></li> 
 
</ul>

Answer 2

您必須使用jQuery：通過id選擇項目，然後使用hide方法。

$('#id_of_li').hide(); 

Answer 3

試試這個代碼。它允許你隱藏包含按鈕的li。

$("#hide").on('click',function(){ 
 

 
hidePane($(this).parent()); 
 
}); 
 

 
function hidePane(parent){ 
 
    parent.hide(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="sortable grid"> 
 
     <li>Item 1 <button id="hide">Dismiss</button></li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
     <li>Item 5</li> 
 
     <li>Item 6</li> 
 
    </ul>

Answer 4

你可以試試這個：

HTML代碼：

<ul class="sortable grid"> 
    <li>Item 1 <br /><input type="submit" onclick="hidePane(this);"></li> 
    <li>Item 2 <br /><input type="submit" onclick="hidePane(this);"></li> 
    <li>Item 3 <br /><input type="submit" onclick="hidePane(this);"></li> 
    <li>Item 4 <br /><input type="submit" onclick="hidePane(this);"></li> 
    <li>Item 5 <br /><input type="submit" onclick="hidePane(this);"></li> 
    <li>Item 6 <br /><input type="submit" onclick="hidePane(this);"></li> 
</ul> 

JS代碼：

function hidePane(ref) { 
       $(ref).parent().hide() 
      } 

Answer 5

這將是更好，如果你的jQuery

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<ul class="sortable grid"> 
     <li>Item 1<button class="dismiss"> Dismiss</button></li> 
     <li>Item 2<button class="dismiss"> Dismiss</button></li> 
     <li>Item 3<button class="dismiss"> Dismiss</button></li> 
     <li>Item 4<button class="dismiss"> Dismiss</button></li> 
     <li>Item 5<button class="dismiss"> Dismiss</button></li> 
     <li>Item 6<button class="dismiss"> Dismiss</button></li> 
    </ul> 

這裏做的是你的JS

$(".dismiss").click(function() { 
$(this).parent().hide(); 
}); 

我建議你不要使用HTML的onclick（），因爲它被認爲是不好的做法 [Why is using onClick() in HTML a bad practice?