如何刪除一個元素從一個類與許多元素？

我有多個.note，我希望能夠點擊.remove（每個.note），它將刪除我點擊的.remove所在的.note。我使用.closest()來做到這一點，但它會只適用於第一個音符，而不是其後的其他音符。提前致謝！如何刪除一個元素從一個類與許多元素？

下面是代碼：

，消除了.note代碼：

$('.remove').click(function() { 
    $(this).closest('.note').remove(".note"); 
});

HTML：

<body> 
<div id="wrapper"> 
    <div id="wrp"> 
     <h1>Click to make a new note!!!</h1> 

     <hr> 
     <div class="note"> 
      <p class="remove"><b>X</b> 

      </p> 
      <div class="time"></div> 
      <hr> 
      <textarea class="item"></textarea> 
      <div class="saved"><span class="msg"></span> 

      </div> 
     </div> 
</body>

JS：

$('.note').click(function (event) { 
event.preventDefault(); 
}); 

$('#wrp, #wrapper').click(function showNote() { 
$('.note').fadeIn(); 
}); 

$(function() { 

$(document).mousedown(function (event) { 
    // only proceed if clcik is not anywhere in a note element 
    if (!$(event.target).closest('.note').length) { 
     var note2 = $('.note').first(); 
     note2.clone().insertBefore(note2); 
     console.log(note2); 
    } 
}); 
}); 

$('.remove').click(function() { 
$(this).closest('.note').remove(".note"); 
}); 



window.onload = function() { 
var input = $("#item").focus(); 
}; 



function date() { //code indentation 
var now = new Date(); 
now2 = now.getMonth() + 1 + '/' + now.getDate() + '/' + now.getFullYear() + ' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds(); 
$('.time').html(now2); 
} 
date(); 

var autosaveOn = false; 

function myAutosavedTextbox_onTextChanged() { 
if (!autosaveOn) { 
    autosaveOn = true; 
    $('.item').everyTime("3000", function() { 
     $.ajax({ 
      type: "POST", 
      url: "/echo/html/", 
      data: "id=1", 
      success: function (msg) { 
       $('.msg').text(Saved); 
       alert("saved"); 
      } 
     }); 
    }); //closing tag 
} 
} 
$(".note").closest('.note').draggable(); 

$(function() { 
$("#tabs").autoSave(callback, ms); 
}); 
$(".item").autoSave(function() { 
var time = new Date().getTime(); 
$("#msg").text("Draft Autosaved " + time); 
}, 500);

來源

2015-05-21 Clay H

，因爲你知道你的.remove元素是.note的直接孩子，你可以選擇它的父：

$('.remove').click(function() { 
    $(this).parent().remove(); 
});

如果.remove元素不.note的直接子女，你可以這樣做：

$('.remove').click(function() { 
    $(this).parents(".note").remove(); 
});

重要：

如果您的筆記是動態生成的，那麼你就需要利用事件委託，通過單擊處理連接到包裝，而不是.remove按鈕，而火與.remove類元素點擊裏面的包裝：

$('#wrapper').on("click",".remove",function() { 
    $(this).parent().remove(); 
});

來源

2015-05-21 15:51:48 Banana

Thx，這個固定它！ –

這樣做：

$('.remove').click(function() { 
    $(this).closest('.note').remove(); 
});

這將只刪除closest注意到，作爲closest()功能已經選擇的元素呢。如果您將參數傳遞給remove()，它將搜索與其匹配的所有元素，但是如果您在已選節點上使用它，則會刪除該節點。

DOCS：https://api.jquery.com/remove/

來源

2015-05-21 15:47:51 somethinghere

我已經有這個在我的代碼，它只會刪除第一個音符，而不會爲所有其他音符 –

我明白了工作。這是一個重複問題（與其他答案描述的一樣）。當您克隆節點時，點擊仍然錯誤地針對原始元素。將其應用於每個目標。給另一個人一個。 – somethinghere

看起來你有一個音符，然後你當你點擊比其他音符克隆的東西和它旁邊將其插入到前一個音符。既然你只是綁定到第一個音符，你需要使用一個實時功能。例如。像

$('body').on('click', '.remove', function() { 
 
    $(this).closest('.note').remove(); 
 
});

來源

2015-05-21 15:50:03 honerlawd

你的代碼片段不起作用 –

忘了添加右括號的東西..應該現在工作正常。 – honerlawd

這是一個可能的解決方案。可能我遲到了......在輸入答案時分心了。

$('.remove').on('click', function(){ 
 
    $(this).parent().remove(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div id="wrapper"> 
 
    <div id="wrp"> 
 
     <h1>Click to make a new note!!!</h1> 
 

 
     <hr> 
 
     <div class="note"> 
 
      <p class="remove"><b>X</b> 
 

 
      </p> 
 
      <div class="time"></div> 
 
      <hr> 
 
      <textarea class="item">Note1</textarea> 
 
      <div class="saved"> 
 
       <span class="msg"></span> 
 
      </div> 
 
     </div> 
 
     <div class="note"> 
 
      <p class="remove"><b>X</b> 
 

 
      </p> 
 
      <div class="time"></div> 
 
      <hr> 
 
      <textarea class="item">Note2</textarea> 
 
      <div class="saved"> 
 
       <span class="msg"></span> 
 
      </div> 
 
     </div> 
 
     <div class="note"> 
 
      <p class="remove"><b>X</b> 
 

 
      </p> 
 
      <div class="time"></div> 
 
      <hr> 
 
      <textarea class="item">Note3</textarea> 
 
      <div class="saved"> 
 
       <span class="msg"></span> 
 
      </div> 
 
     </div> 
 
     <div class="note"> 
 
      <p class="remove"><b>X</b> 
 

 
      </p> 
 
      <div class="time"></div> 
 
      <hr> 
 
      <textarea class="item">Note4</textarea> 
 
      <div class="saved"> 
 
       <span class="msg"></span> 
 
      </div> 
 
     </div> 
 
     <div class="note"> 
 
      <p class="remove"><b>X</b> 
 

 
      </p> 
 
      <div class="time"></div> 
 
      <hr> 
 
      <textarea class="item">Note5</textarea> 
 
      <div class="saved"> 
 
       <span class="msg"></span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2015-05-21 16:01:00

如何刪除一個元素從一個類與許多元素？

回答

相關問題