Question

我有大约100个图标，当我选择其中一些时，它们出现在以下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);

我想添加一个指向关闭图标的链接，这是一个span类，所以点击后删除相关图标。我尝试添加<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： -

show

如果没有奏效，请试试这个： -

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

Answer 2

通过此示例，您将获得帮助：

$('span').click(function(){
	$(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>

点击<span>

2 个答案: