我大约有100个图标,当我选择其中一些图标时,它们会出现在以下div块中:

javascript - 通过单击<span>删除整个div结构-LMLPHP

这是我如何生成上面的结构:

$(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();
            }
        });


附言:如果您认为自己提出的问题不是很好,请向我发送教程,以帮助您解决问题。提前致谢

最佳答案

您必须使用event-delegation:-

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


如果没有用,请尝试以下方法:-

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

10-01 18:33
查看更多