用戶單擊字體超贊圖標時刪除按鈕

Question

這似乎是一個非常愚蠢的問題，但我無法解決。 我希望當用戶單擊awesome（x）字體圖標時刪除帶有電子郵件的按鈕。 基本上，我希望刪除添加的電子郵件。

<div id="closes">
    <button class="btn btn-sm ">
        <span> email@email.com.net</span>
        <a href="#" onclick="myFunction()">
            <span class="fa fa-times-circle close"></span>
        </a>
    </button>
</div>

我對jquery幾乎一無所知，但是通過搜索，這是我能搜集到的最好的信息。

<script>
    function myFunction() {
        $(this).closest('span').closest('button').closest('div').remove();
    }
</script>

該鏈接給出了到目前為止所做的工作。

Answer 1

您需要event.preventDefault(); 以防止出現默認行為。 由於您的關閉位於a標簽內，因此它將嘗試導航至該頁面。 要刪除包含電子郵件的button ，只需使用$(this).parents('button')因為您的按鈕位於clicked元素的父級中。 parents()獲取當前匹配元素集中每個元素的祖先，可以選擇通過選擇器進行過濾。

 $('.closes').on('click', 'a', function(e) { e.preventDefault(); $(this).parents('button').remove(); }); 

 @import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css); @import url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); .wrapper { position: relative; display: inline - block; } .close { position: absolute; margin - right: 0; margin - top: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper closes"> <button class="btn btn-sm "> <span>email@email.com.net</span> <a href=""> <span class="fa fa-times-circle close"></span> </a> </button> </div> <div class="wrapper closes"> <button class="btn btn-sm "> <span>email@email.com.net</span> <a href=""> <span class="fa fa-times-circle close"></span> </a> </button> </div> 

Answer 2

我建議為要使用javascript / jquery執行某些操作的所有HTML元素設置ID。 這有助於獲得正確的元素。

之后，將onClick事件寫入真棒字體圖標，然后在該方法中刪除按鈕。

HTML：

    <div id="closes" class="wrapper">
      <button id="button" class="btn btn-sm ">
         <span>email@email.com.net</span>&nbsp;
           <a class="fa fa-times-circle close" id="icon"></a>
         </button>
    </div>

JS：

    $(document).ready(function(){
       $("#icon").click(function(){
         $("#button").remove();
       });
    });

https://jsfiddle.net/4mkwn0ad/29/

Answer 3

使用remove()將button不按div

function myFunction() {
   $(this).closest('span').closest('button').remove();
}

Answer 4

簡單起見，為電子郵件范圍分配一個ID，例如

<span id="email-text">email@email.com.net</span>

然后在您的myFunction內部做類似

$('#email-text').hide();

Answer 5

首先，您需要使用ID而不是功能，然后您需要更改anchor標記以使其span因為單擊anchor標記然后頁面刷新。

您可以使用下面的代碼正常工作：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="closes"> <button class="btn btn-sm "> <span>email@email.com.net</span> <span href="" id="anchorTag"> <span class="fa fa-times-circle close">X</span> </span> </button> </div> <script> $(document).ready(function(){ $('#anchorTag').click(function(){ $(this).closest('span').closest('button').closest('div').remove(); }) }); </script> 

Answer 6

嘗試這個：

 $(document).ready(function(){ $('.btn-sm a').click(function(){ $(this).closest('button').remove(); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div id="closes"> <button class="btn btn-sm "> <span>email@email.com.net</span> <a href="#"> <span class="fa fa-times-circle close"></span> </a> </button> </div>