通過JQuery去除div元素的困難

我在刪除一個動態添加到DOM的元素時遇到了一些麻煩。下面的腳本中的所有內容都按照它的設想運行，除了mouseleave處理程序中的remove方法外。我的猜測是我用CSS選擇器犯了一個錯誤，但我不確定它是什麼。任何幫助都感激不盡！通過JQuery去除div元素的困難

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Index</title> 
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 


    <script type="text/javascript"> 
     $(function() 
     { 
      $('#myTr').mouseenter(function() 
      { 
       var cell1 = $(this).children(':first'); 
       cell1.css('position', 'relative'); 
       var myDiv = document.createElement('div'); 
       var myChildDiv = document.createElement('div'); 
       myChildDiv.style.position = 'absolute'; 
       myChildDiv.style.height = '20px'; 
       myChildDiv.style.width = '30px'; 
       myChildDiv.style.opacity = '0.6'; 
       myChildDiv.style.background = 'grey'; 
       $(cell1).prepend(myDiv); 
       $(myDiv).append(myChildDiv); 
      }) 
      .mouseleave(function() 
      { 
       $(this).remove('td:first-child>div'); 
      }); 
     }); 
    </script> 

</head> 

<body> 
<table> 
    <tbody> 
     <tr id="myTr"> 
      <td style="width: 200px;"> 
       Anytown, MA 
      </td> 
     </tr> 

    </tbody> 
</table> 
</body> 
</html>

來源

2012-01-18 Andrew

您可以將您創建到元一個在你的函數範圍內的變量，然後簡單地調用remove（）...這有adde d不需要使用css選擇器再次找到它。

$(function() 
    { 
     var myDiv; 
     $('#myTr').mouseenter(function() 
     { 
      var cell1 = $(this).children(':first'); 
      cell1.css('position', 'relative'); 
      myDiv = document.createElement('div'); 
      var myChildDiv = document.createElement('div'); 
      myChildDiv.style.position = 'absolute'; 
      myChildDiv.style.height = '20px'; 
      myChildDiv.style.width = '30px'; 
      myChildDiv.style.opacity = '0.6'; 
      myChildDiv.style.background = 'grey'; 
      $(cell1).prepend(myDiv); 
      $(myDiv).append(myChildDiv); 
     }) 
     .mouseleave(function() 
     { 
      $(myDiv).remove(); 
     }); 
    });

來源

2012-01-18 22:17:42

嘗試使生活

.live('mouseleave', function() 
{ 
    $(this).remove('td:first-child>div'); 
});

的DOM是動態生成的，所以現場將抓住它時，它是由

來源

2012-01-18 22:10:13

嘗試使用遍歷DOM時，有偶爾的陷阱和注意事項jQuery的子關係。例如，即使它實際上不存在，總會有一個TBODY元素包含表格的內部信息。因此，我儘量避免我不必擔心這種事情的情況。由於您處理的是鼠標懸停的情況，因此只需將myChildDiv元素保存到全局變量，然後在mouseleave事件中調用myChildDiv.remove（）就可能更容易。

編輯：看起來像zzzrByte已經建議這個，但我會留下我的答案，因爲它只是因爲它描述了什麼可能會導致問題的第一位。

來源

2012-01-18 22:13:15

應該

$("td:first > div", $(this)).remove();

來源

2012-01-18 22:13:26

我只是使用jQuery的創建對象：

var cell1 = $(this).children(':first'); 
cell1.css('position', 'relative'); 

var myDiv = $('<div />'); 
var myChildDiv = $('<div />'); 

myChildDiv.css({ 
    'position': 'absolute', 
    'height': '20px', 
    'width': '30px', 
    'opacity': '0.6', 
    'background-color': 'grey' 
}); 

$(cell1).prepend(myDiv); 
$(myDiv).append(myChildDiv);

，並使用此mouseleave：

$('td:first > div', this).remove();

來源

2012-01-18 22:15:36 Blender

感謝您的建議！我不經常使用這種語法，但它看起來比我寫的要乾淨得多！ – Andrew 2012-01-18 22:28:43

只是約定的問題。唯一的區別是我創建了一個jQuery對象（所以你可以給它分配一個'.click（）'事件）。 DOM元素對象不會這樣做，除非將它們包裝在jQuery函數'$（）'中。 – Blender 2012-01-19 04:03:46

通過JQuery去除div元素的困難

回答

相關問題