Question

我有大約100圖標，當我選擇他們中的一些，它們出現在以下的div塊拆下整個DIV結構：

$(this).addClass("active"); 

    str += '<div class="liveicon" id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'">'; 
    str += '<span class="close-icon" id="close-icon">&#10006;</span>'; 
    str += '<span id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'" class=" anyi '+clss+'"></span>'; 
    str += '<div class="clearboth"></div>'; 
    str += '<div class="codes">'; 
    str += '<div class="tit">FONT</div><input type="text" class="fontsc" value="[anyicon i=\''+clss+'\' '+stylestr+']">'; 
    str += '<div class="tit">PNG</div><input type="text" class="pngsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'png\']">'; 
    str += '<div class="tit">SVG</div><input type="text" class="svgsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'svg\']">'; 
    str += '</div>'; 
    str += '</div>'; 

    $(".selected .content").append(str); 

我想添加一個鏈接到關閉圖標，這是一個跨班級，所以點擊刪除相關的圖標後。我已經嘗試添加<a href="#"></a>，然後使用js處理，但這不是正確的方法。任何想法都歡迎。 下面是容易定向整個js文件：

$(document).on('click', ".loadarea .content .anyicons .anyi", function() { 
     //$(".anyicon .anyi").on('click', function(e) { 
      var type = $(this).attr("dtype"); 
      var clss = $(this).attr("dclss"); 
      var attr = $(this).attr("dattr"); 
      var id = type+''+clss; 
      //console.log(type); 
      var str = ""; 
      var style = $("#anyicon_styles").val(); 
      var stylestr = "style=\''+style+'\'"; 
      if(style == "0"){ style = ""; stylestr = ""; } 

      if($(this).hasClass("active")){ 
       $(this).removeClass("active"); 
       $(".selected .content .liveicon#"+id).remove(); 
       loadLibraryMsg(); 

      } else { 
       $(this).addClass("active"); 

       str += '<div class="liveicon" id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'">'; 
       str += '<span class="close-icon" id="close-icon">&#10006;</span>'; 
       str += '<span id="'+id+'" dtype = "'+type+'" dclss="'+clss+'" dattr="'+attr+'" class=" anyi '+clss+'"></span>'; 
       str += '<div class="clearboth"></div>'; 
       str += '<div class="codes">'; 
       str += '<div class="tit">FONT</div><input type="text" class="fontsc" value="[anyicon i=\''+clss+'\' '+stylestr+']">'; 
       str += '<div class="tit">PNG</div><input type="text" class="pngsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'png\']">'; 
       str += '<div class="tit">SVG</div><input type="text" class="svgsc" value="[anyicon i=\''+clss+'\' '+stylestr+' type=\'svg\']">'; 
       str += '</div>'; 
       str += '</div>'; 

       $(".selected .content").append(str); 

       loadLibraryMsg(); 
      } 
     }); 

P.S，如果你認爲我不是問一個很好的問題，請給我教程如何是可以做到的，這將有很大的幫助。在此先感謝

Answer 1

你必須使用event-delegation： -

$(".selected .content").on('click','.close-icon',function(){ 
    $(this).closest('.liveicon').remove(); 
}); 

如果沒有工作，然後試試這個： -

$(document).on('click','.close-icon',function(){ 
    $(this).closest('.liveicon').remove(); 
}); 

Answer 2

通過這個例子，你會得到的幫助：

$('span').click(function(){ 
 
\t $(this).closest('.parent').remove(); 
 
})

.parent{ 
 
    position:relative; 
 
    width:70%; 
 
} 
 
img{ 
 
    max-width:100%; 
 
    width:auto; 
 
    margin:0 auto; 
 
} 
 
span{ 
 
    position:absolute; 
 
    right:2%; 
 
    font-weight:bold; 
 
    color:tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='parent'> 
 
    <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSd8cAJmOsrWimMAMpTAFOPURbw4q7uDKKxau1nimZ4V-usMb0w'/> 
 
    <span>X</span> 
 
</div>