Додати <div> за допомогою клацання та видалення за допомогою клацання

У мене є така проблема:

Я додаю div:

$(".class").click(function() {   
    $(this).append("<div class='click'></div>");
    $("div.click").show();
});

Тоді я видаляю його одним натисканням на іншу кнопку, але розділ все ще існує.

$(".button").on("click", function(e){
    e.preventDefault();
    ...
    $("div.click").hide();
});
1
мій припущення - щось у цих "..." викликає помилку - або кнопка натискання кнопки не називається.
додано Автор ek_ny, джерело
будь-яка конкретна причина введення hide після preventDefault() ? чому б не раніше? це буде зрозуміло таким чином.
додано Автор hitesh israni, джерело
не розумію вашу проблему. справа, про яку ви питаєте, працює, як показано в наведеній скрипці.
додано Автор hitesh israni, джерело
Ви збираєтесь фактично видалити його? Або просто приховати це? Тому що в даний час ви тільки робите останню.
додано Автор David, джерело
показати ваш HTML ...
додано Автор Mohammad Adil, джерело
jsfiddle.net/suhailvs/4VmYP так далі там
додано Автор suhailvs, джерело
Чи називається обробник кліків на вашій кнопці?
додано Автор user1864610, джерело

7 Відповіді

видалити "на" від

$(".button").on("click", function(e){
    e.preventDefault();
    ...
    $("div.click").hide();
});
2
додано
Що це досягне?
додано Автор David, джерело
Ні - не має значення, наскільки я бачу.
додано Автор user1864610, джерело

Спробуйте зберегти покажчик на розділ, який слід виконати.

var tempDiv;
$(".class").click(function() {   
  tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});

$(".button").on("click", function(e){
  e.preventDefault();
  tempDiv.remove();
});

Інакше ви можете використовувати цей спосіб

$(".class").click(function() {   
   $("<div class='click'></div>").appendTo($(this)).show();
});

$(".button").on("click", function(e){
  e.preventDefault();
  $('.click').remove();
});

PS: Ви також можете видалити .show() , якщо клас .click не прихований за замовчуванням

1
додано
Try this

You have two buttons.

Say:

<div class="Main">
    <div>Div0</div>
</div>

<button class="button1">Click to add</button>
<button class="button2">Click to remove</button>


and JS Code is :

var counter=1;

$(".button1").click(function() {  

$('.Main').append("<div class='click'> newly added Div "+counter+"</div>");
counter++;
$("div .click").show();
});

$(".button2").click(function() {

$('.Main div').remove(':last-child');
});
1
додано

Коли ви динамічно створюєте елемент, вам потрібна делегована подія: .on (подія, селектор, обробник (eventObject)) .

$(document).on("click", ".button", function(e){
    e.preventDefault();
    ...
    $("div.click").hide();
});

Якщо ви хочете видалити елемент, вам слід скористатися методом .remove() замість .hide() .

0
додано

Here is an example based on your work : http://jsfiddle.net/UQTY2/128/

<div class="class">Click to add a green box</div>
<button class="button">Click to remove all green boxes</button>

$(".class").click(function() {
    $(this).append("<div class='click'></div>");
});

$(".button").click(function(e) {
    e.preventDefault();
    $("div.click").remove();
});
0
додано

це буде видалено

$(".button").on("click", function (e) {

    e.preventDefault();
    $("div.click").remove();
});

перевірити мою скрипку

http://jsfiddle.net/suhailvs/4VmYP/2/

0
додано

ви можете динамічно додати і вилучити div з javaScript, як це

Перевірте цей приклад

Динамічно додавати та видаляти Div

в цьому прикладі кнопка видалення за замовчуванням видаляє останній доданий розділ або ви можете сказати останній розділ у контейнері Але якщо ви хочете видалити особливий div з номером div, то ви можете ввести номер div.

Приклад коду

HTML

<div class="Main">
    <div>div1</div>
</div>
<button id="ok">add</button>
<button id="del">remove</button>

<input id="V"/>
<button id="Vok">ok</button>

JS

var counter=0;
$("#ok").click(function(){
    $('.Main').append('<div> new div'+counter+'</div>');
    counter++;
})
$("#del").click(function(){
    $('.Main div').remove(':last-child');
})
$("#Vok").click(function(){
    var Val=$('#V').val();
    $('.Main div:nth-child('+Val+')').remove();
})
0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram