删除按钮正在删除除特定注释之外的所有注释

时间:2015-09-09 18:36:06

标签: jquery html

如果我在屏幕上有3个按钮,当单击每个按钮时,它会加载带有删除按钮的注释。有时,我面临删除按钮删除所有3个图像的问题,而不是仅删除该特定图像。有什么想法吗?我更新了代码,每个代码都有不同的“输入#” 但我仍然遇到了这个问题。

$("#addnote3").click(function() {
   
     if($("#theImgb").length == 0){
var txt_box2='<div id="input3" style="display:block"; ><a href=""><img id="theImgb" width="120px;" src="http://www.clker.com/cliparts/W/7/9/Z/g/3/blue-red-sticky-note-md.png"/><img src="http://www.pedagogic.com/services/Pics/delete_button_small.gif" class="removec"/></div>';    
     $(".panel1").append($(txt_box2).clone());
        
 $('.panel1').on("click", ".removec", function() {  
     $(".alert").show();
 
    $(this).parent().slideUp('medium',function(e){
$("#input3").remove().empty();
        $(this).remove();
        store();
           $('[input3]').each(function () {
 
        var ids = $('[input3="' + this.id + '"]');
 
        // remove duplicate IDs
        if (ids.length > 1 && ids[0] == this) $('#' + this.id).remove();
 
    });
  
    });
});
store();
         }           
    
 });
 
$("#addnote4").click(function() {
      $(".alert").show();
     if($("#theImgb").length == 0){
var txt_box2='<div id="input3" style="display:block"; ><a href=""><img id="theImgc" width="120px;" src="http://www.clker.com/cliparts/W/7/9/Z/g/3/blue-red-sticky-note-md.png"/><img src="http://www.pedagogic.com/services/Pics/delete_button_small.gif" class="removec"/></div>';    
     $(".panel1").append($(txt_box2).clone());
        
 $('.panel1').on("click", ".removec", function() {  
     $(".alert").show();
 
    $(this).parent().slideUp('medium',function(e){
$("#input4").remove().empty();
        $(this).remove();
        store();
           $('[input4]').each(function () {
 
        var ids = $('[input4="' + this.id + '"]');
 
        // remove duplicate IDs
        if (ids.length > 1 && ids[0] == this) $('#' + this.id).remove();
 
    });
  
    });
});
store();
         }           
    
 });

$("#addnote5").click(function() {
      $(".alert").show();
     if($("#theImgb").length == 0){
var txt_box2='<div id="input5" style="display:block"; ><a href=""><img id="theImgc" width="120px;" src="http://www.clker.com/cliparts/W/7/9/Z/g/3/blue-red-sticky-note-md.png"/><img src="http://www.pedagogic.com/services/Pics/delete_button_small.gif" class="removec"/></div>';    
     $(".panel1").append($(txt_box2).clone());
        
 $('.panel1').on("click", ".removec", function() {  
     $(".alert").show();
 
    $(this).parent().slideUp('medium',function(e){
$("#input5").remove().empty();
        $(this).remove();
        store();
           $('[input5]').each(function () {
 
        var ids = $('[input5="' + this.id + '"]');
 
        // remove duplicate IDs
        if (ids.length > 1 && ids[0] == this) $('#' + this.id).remove();
 
    });
  
    });
});
store();
         }           
    
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="addnote3">Add</button>
<button id="addnote4">Add</button>
 <button id="addnote5">Add</button>
<div class="panel1"></div>

我将这些注释附加到DOM。注释(addNote 3和addNote4)具有附加的删除按钮。好吧,我在那里添加了代码,它将删除已经附加的那个注释,但问题是它有时会删除所有内容。 (注意它的代码将删除重复的ID。我在这个代码中添加了因为在dom中,但没有在视觉上创建额外的ID,但在视觉上,所以我找到了删除它们的代码。)。任何帮助都会很棒!

$("#addnote3").click(function () {
    $(".alert").show();
    if ($("#theImgb").length == 0) {
        var txt_box2 = '<div id="input3" style="display:block"; ><a href=""><img id="theImgb" width="120px;" src="assets/img/bluesticky3.png"/><img src="assets/img/remove.png" class="removec"/></div>';
        $(".panel1").append($(txt_box2).clone());

        $('.panel1').on("click", ".removec", function () {
            $(".alert").show();

            $(this).parent().slideUp('medium', function (e) {
                $("#input3").remove().empty();
                $(this).remove();
                store();
                $('[input3]').each(function () {

                    var ids = $('[input3="' + this.id + '"]');

                    // remove duplicate IDs
                    if (ids.length > 1 && ids[0] == this) $('#' + this.id).remove();

                });

            });
        });
        store();
    }

});

$("#addnote4").click(function () {
    $(".alert").show();
    if ($("#theImgb").length == 0) {
        var txt_box2 = '<div id="input3" style="display:block"; ><a href=""><img id="theImgc" width="120px;" src="assets/img/bluesticky4.png"/><img src="assets/img/remove.png" class="removec"/></div>';
        $(".panel1").append($(txt_box2).clone());

        $('.panel1').on("click", ".removec", function () {
            $(".alert").show();

            $(this).parent().slideUp('medium', function (e) {
                $("#input3").remove().empty();
                $(this).remove();
                store();
                $('[input3]').each(function () {

                    var ids = $('[input3="' + this.id + '"]');

                    // remove duplicate IDs
                    if (ids.length > 1 && ids[0] == this) $('#' + this.id).remove();

                });

            });
        });
        store();
    }

});

0 个答案:

没有答案