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

所以我有一些使用UL列表和幾個LI標籤排列的圖塊。隱藏使用jQuery/Javascript包含的按鈕元素

我想要一個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喜歡它有一個解僱按鈕，每次點擊它只會隱藏瓷磚，當你滾動。

來源

2017-07-20 jord49

請勿將元素置於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>

來源

2017-07-20 09:23:03 Ionut

@ jord49，真棒。別客氣。很高興能有所幫助。 – Ionut

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

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

來源

2017-07-20 09:22:37

麪糊刪除全部：P –

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

所以你需要一個循環，並在li元素和按鈕中設置相同的id，然後你必須 $（'＃button_id'）。click（function（）{$（'＃li_'+ this.attr （'id'）。split（'_'）[1]）。hide（） }） –

試試這個代碼。它允許你隱藏包含按鈕的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>

來源

2017-07-20 09:36:51

你可以試試這個：

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() 
      }

來源

2017-07-20 10:00:40

謝謝@Adeel你是一個拯救生命的人 –

這將是更好，如果你的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?

來源

2017-07-20 10:44:50

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

回答

相關問題