在結束標記后刪除文本（JavaScript）

Question

當用戶不再將鼠標懸停在按鈕上時，我正在嘗試在</i>標記后刪除文本。

我已經嘗試了代碼中的注釋部分，也許它們可以使您了解我要去哪里。

 $('#deleteButton').on('mouseenter', function(event) { //$(this).find('i').html(' Delete Nest'); $(this).find('i').after(' Delete Nest'); //$(this).find('i').after(' <div>Delete Nest</div>'); }).on('mouseleave', function(event) { //$(this).find('i').html(''); console.log($(this).find('i').after()); //$(this).find('i').after(''); //$(this).find('i').childNodes[1].textContent; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> This is the HTML of the button: <button id="deleteButton" type="submit" name="_method" value="DELETE" class="btn btn-sm btn-danger muted muted-hover"><i class="fas fa-trash-alt"></i></button> 

除了應該不添加任何內容外，還應該從#deleteButton按鈕中刪除“刪除嵌套”部分。

Answer 1

如果可以將添加的文本包裝在一個span則可以通過將添加的文本定位為相對於i元素的next元素來刪除添加的文本：

 $('#deleteButton').on('mouseenter', function(event) { $(this).find('i').after('<span>Delete Nest</span>'); }).on('mouseleave', function(event) { $(this).find('i').next().remove(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> This is the HTML of the button: <button id="deleteButton" type="submit" name="_method" value="DELETE" class="btn btn-sm btn-danger muted muted-hover"><i class="fas fa-trash-alt"></i></button> 

Answer 2

這是您的解決方案：

 $('#deleteButton').on('mouseenter', function(event) { //$(this).find('i').html(' Delete Nest'); $(this).find('i').after('<span class="btnText">Delete Nest</span>'); //$(this).find('i').after(' <div>Delete Nest</div>'); }).on('mouseleave', function(event) { //$(this).find('i').html(''); console.log($(this).find('i').after()); $(this).find('.btnText').remove(); //$(this).find('i').childNodes[1].textContent; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> This is the HTML of the button: <button id="deleteButton" type="submit" name="_method" value="DELETE" class="btn btn-sm btn-danger muted muted-hover"><i class="fas fa-trash-alt"></i></button>