刪除並通過電臺添加div

Question

當我選擇答案"no"該文本框出現的情況。如果我改變主意，我會選擇"yes"文本框消失。但如果我再次更改爲"no"文本框不再出現...

我在哪裏犯錯？

Fiddle Demo

var numAdd = 1; 
var add = function() { 
    if (numAdd >= 2) return; 
    $('#skoki').append('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>'); 
    numAdd++; 
}; 

function hideByClass(className) { 
    $("."+className).remove(); 
}; 

Answer 1

你也可以做到這一點通過下面的代碼

$(document).on('click', 'input.inp-rad', function(){ 
 
\t \t if($(this).attr('data-val') == 'No'){ 
 
\t \t \t \t $('#skoki').html('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>'); 
 
    }else{ 
 
    \t \t $('#skoki').html(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
Do you like stack Overflow? If "No" tell me why.<br> 
 
<input type="radio" name="a" class="inp-rad" data-val="Yes"><label>Yes</label> 
 
<input type="radio" name="a" class="inp-rad" data-val="No"><label>No</label> 
 
<div id="skoki" class="blueBox"></div>

Answer 2

您刪除剛剛輸入自己的父元素來代替。你應該做的是刪除孩子，或者乾脆清除HTML。你也有一個條件，不允許再次添加輸入。所以，你需要重置回1，以便在加回輸入

var numAdd = 1; 
 
var add = function() { 
 
    if (numAdd >= 2) return; 
 
    $('#skoki').append('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>'); 
 
    numAdd++; 
 
}; 
 

 
function hideByClass(className) { 
 
    $("."+className).html(''); 
 
    numAdd = 1; 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Do you like stack Overflow? If "No" tell me why.<br> 
 
<input type="radio" name="a" onclick="hideByClass('blueBox');"><label>Yes</label> 
 
<input type="radio" name="a" onclick="add()"><label>No</label> 
 
<div id="skoki" class="blueBox"> 
 
    </div>

Answer 3

原因： - 。你在你的hideByClass()功能刪除整個DIV所以第二次add()不工作，因爲$('#skoki')是未定義的。

只需做如下圖所示： -

function add() { 
 
    $('.blueBox').html('<div><input type="text" name="2" style="width: 100x; height: 300px;" /></div>'); 
 
}; 
 

 
function hideByClass(className) { 
 
    $("."+className).html(''); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Do you like stack Overflow? If "No" tell me why.<br> 
 
<input type="radio" name="a" onclick="hideByClass('blueBox');"><label>Yes</label> 
 
<input type="radio" name="a" onclick="add()"><label>No</label> 
 
<br> 
 
<div id="skoki" class="blueBox"></div>

Answer 4

var numAdd = 1; 
 
var add = function() { 
 
    $('#skoki').append('<div class="blueBox"><input type="text" name="2" style="width: 100x; height: 300px;" /></div>'); 
 
    
 
}; 
 

 
function hideByClass(className) { 
 
    $("."+className).remove(); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Do you like stack Overflow? If "No" tell me why.<br> 
 
<input type="radio" name="a" onclick="hideByClass('blueBox');"><label>Yes</label> 
 
<input type="radio" name="a" onclick="add()"><label>No</label> 
 
<div id="skoki"> 
 
    </div>

Answer 5

我已經改變你的代碼一點點以下和它的作品。

Do you like stack Overflow? If "No" tell me why.<br> 
<input type="radio" name="a" onclick="hideByClass('input');"><label>Yes</label> 
<input type="radio" name="a" onclick="openByClass('blueBox')"><label>No</label> 
<div id="skoki" class="blueBox"> 
    </div> 

你的JavaScript

function hideByClass(className) { 
    $("."+className).remove(); 
}; 

function openByClass(className){ 
    $("."+className).append('<div class="input"><input type="text" name="2" style="width: 300px; height: 35px;" /></div>'); 
};