javascript - Create/remove elements on the fly

Question

I have this code:

if (data.response) {
    $("#product-create-step-2 input:last").after('<div class="variation_checkbox"><input type="checkbox" value="1" name="has_variations" id="has_variations" /> Posee variaciones?</div>');
} else {
    console.log("false");
    $("#product-create-step-2 input:last").remove('#variation_checkbox');
}

What is happening is:

1. When data.response is true it creates the element several times and I need to create only one time and don't know how
2. When data.response is false element previously create never is removed and don't know why

Any help?

UPDATE

I create the element as follow:

<div id="has_variation" style="display:none">
    <input type="checkbox" value="1" name="has_variations" id="has_variations" /> Has variations?
</div>

And then change my code to:

$("div.has_variation").toggle(data.response);

Is not supposed that if data.response is true the element should show and if data.response is false the element should hide? I missing something?

Answer 1

variation_checkbox是一个类.. "#" 用于 id & dot 用于类。

$("#product-create-step-2").find('.variation_checkbox').remove();

js 小提琴演示

Answer 2

您在div输入后被附加。您的选择器正在查看输入内容。$("#product-create-step-2 input:last").remove('#variation_checkbox');

试试这个：

$("#product-create-step-2 input:last").next('.variation_checkbox').remove();

编辑更改#variation_checkbox为.variation_checkbox.