javascript - 单击 删除整个 div 结构

Question

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

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

$(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 :-

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

如果不行就试试这个:-

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