javascript 使用 jQuery 动态删除单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9601478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove radio buttons dynamically using jQuery
提问by Java Player
i have a problem in removing radio buttons using, i have used the (.remove) function, but when i use it it deletes all the radio buttons, i want to delete them separetly: see a demo here http://jsfiddle.net/HaBhk/10/thanks
我在使用删除单选按钮时遇到问题，我使用了 (.remove) 功能，但是当我使用它时它会删除所有单选按钮，我想单独删除它们：在此处查看演示http://jsfiddle.net /HaBhk/10/谢谢
回答by linuxeasy
You can seperate your radio buttons either by idor 'class' or specific tag namesand then select them appropriately and delete them.
您可以按id“类”或“特定”分隔单选按钮tag names，然后适当地选择它们并删除它们。
like :
喜欢 ：
$('input[type=radio].class_name').remove(); // delete with class_name
// or
$('input[type=radio]#id_name').remove(); // delete with id_name
// or
$('input[type=radio][name=your_specific_name]').remove(); // delete with your radio button's specific name attribute.
$('input[type=radio]:eq(1)').remove(); //to remove your elements if they would occur in fixed specific order, or in case dynamic order deletion is fine.
Update on OP's comment
更新 OP 的评论
If they are dynamically generated, its still can be done, dunno what's your dynamic language is, but consider in php, you can do it this way:
如果它们是动态生成的，它仍然可以完成，不知道你的动态语言是什么，但考虑一下php，你可以这样做：
$('input[type=radio]#<?php echo $dynamic_id_variable; ?>').remove();
//or for javascript
$('input[type=radio]#'+ dynamic_id_variable ).remove();
回答by Misam
$('input:radio:last').remove();
This should do the trick. This will remove only the last added radio button one by one
这应该可以解决问题。这将一一删除最后添加的单选按钮
回答by sandeep
It removes all of them because all radio buttons have same ID if they have the same label ...and $('#after').children().remove();removes all the children, which means all radio buttons in that div..
change code according to your functionality
它会删除所有这些，因为如果所有单选按钮具有相同的标签，则它们具有相同的 ID ...并$('#after').children().remove();删除所有子项，这意味着该 div 中的所有单选按钮...根据您的功能更改代码
回答by Jared Farrish
I put together a variation to demonstrate several techniques. Unfortunately, I'm late for work and have a toilet that ran over all over the place, so leave a comment under this answer if you have any questions.
我整理了一个变体来演示几种技术。不幸的是，我上班迟到了，厕所到处都是，所以如果您有任何问题，请在此答案下留言。
HTML
HTML
I made some changes to the names/ids and how the add/remove works. I think these names/ids are more consistent and descriptive, but your mileage may vary.
我对names/ ids 以及添加/删除的工作方式进行了一些更改。我认为这些names/ ids 更一致和更具描述性，但您的里程可能会有所不同。
<input type="text" name="option" id="option" value="test"/>
<button id="add-option" data-role="button" data-inline="true">Add Option</button>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose an Option:</legend>
<div id="options"></div>
</fieldset>
</div>
CSS
CSS
Some changes to the styling, I just think it looks better.
样式有一些变化，我只是觉得它看起来更好。
#options label {
display: block;
}
#options label span {
padding-left: 5px;
padding-right: 5px;
}
#options label button {
border: 1px solid #aaa;
border-left: 1px solid #9b9b9b;
border-bottom: 1px solid #9b9b9b;
background: #ddd;
font-size: 8px;
font-weight: bold;
padding: 2px 1px;
position: relative;
top: -5px;
}
Javascript/jQuery
Javascript/jQuery
Lots of goodies, including caching, variable functions, more natural handlers, cloning elements instead of making a new one for every function call, etc. I also added a check to make sure the radio we're adding/creating doesn't already exist in the DOM.
很多好东西，包括缓存、变量函数、更自然的处理程序、克隆元素而不是为每个函数调用创建一个新元素等。我还添加了一个检查以确保我们正在添加/创建的收音机不存在在 DOM 中。
$(document).ready(function(){
var $radio = $('<input type="radio" name="options[]">'),
$remove = $('<button>x</button>'),
$label = $('<label>'),
$span = $('<span>'),
$option = $('input[name=option]'),
$addbutton = $('#add-option'),
$options = $('#options'),
aregex = new RegExp(/[^a-zA-Z0-9 ]+/g),
spregex = new RegExp(/[ ]+/g),
optpre = 'option_';
var addRadioOption = function(){
var checkRadioExists = function(){
var text = $option.val(),
id = text.replace(aregex,'').replace(spregex,'_').toLowerCase(),
id = optpre + id,
opt = document.getElementById(id);
if (!opt && id != '' && text != '') {
return createRadioElement(id, text);
}
return false;
};
var createRadioElement = function(id, text) {
var $label_clone = $label.clone(),
$span_clone = $span.clone(),
$radio_clone = $radio.clone(),
$remove_clone = $remove.clone();
var removeRadioOption = function(){
$label_clone.remove();
};
$remove_clone.click(removeRadioOption);
$radio_clone.val(text).attr('id', id);
$span_clone.text(text);
$label_clone.append($radio_clone, $span_clone, $remove_clone);
return $options.append($label_clone).has($label_clone);
};
return checkRadioExists();
};
$addbutton.click(addRadioOption);
});
回答by MatuDuke
To remove the last radio button, you can do:
要删除最后一个单选按钮，您可以执行以下操作：
$('#RemoveButton').click(function(){
$('#after').children().last().remove();
$('#after').children().last().remove();
$('#after').children().last().remove();
});
I added 3 lines, because you insert one radio-button, one label and one line-break. You could put all inside a div like this:
我添加了 3 行，因为您插入了一个单选按钮、一个标签和一个换行符。你可以像这样把所有东西都放在一个 div 中：
function createRadioElement(elem, label, checked) {
var id = 'option1_' + label;
$('#after').append($('<div><input type="radio" name="option1" id="' + id + '" value="1" /><label for="' + id + '">' + label + '</label></div>'));
}
$('#AddButton').click(function(){
var x = document.getElementById('option').value;
createRadioElement(this,$('#option').val());
});
$('#RemoveButton').click(function(){
$('#after').children().last().remove();
});
回答by MatuDuke
If you want to delete the selected radio:
如果要删除选定的收音机：
function createRadioElement(elem, label, checked) {
var id = 'option1_' + label;
$('#after').append($('<div><input type="radio" name="option1" id="' + id + '" value="1" /><label for="' + id + '">' + label + '</label></div>'));
}
$('#AddButton').click(function(){
var x = document.getElementById('option').value;
createRadioElement(this,$('#option').val());
});
$('#RemoveButton').click(function(){
$('#after').children().children("input[checked='checked']").parent().remove();
});
回答by Matt Esch
Thought I would have a go at the problem. I don't particularly like relying on ids as they should in theory be unique but you can't always guarantee it. I like to keep a reference to elements that I've added to the page because it's likely that I will want to remove them at some point. Here's an example which doesn't allow duplicate options and doesn't rely on ids (although I kept your label-input association).
以为我会解决这个问题。我不是特别喜欢依赖 id，因为它们理论上应该是唯一的，但你不能总是保证它。我喜欢保留对已添加到页面的元素的引用，因为我可能希望在某个时候删除它们。这是一个不允许重复选项且不依赖于 id 的示例（尽管我保留了您的标签输入关联）。
The benefits are that you can quickly rebuild the option list (say if you wanted to sort them) and you can easily test if an option exists without having to look it up. Other than your label association you don't actually need to use any id values. I've preserved your passing of elem even though I don't see you using it.
好处是您可以快速重建选项列表（比如您是否想对它们进行排序），并且您可以轻松测试选项是否存在而无需查找。除了您的标签关联之外，您实际上不需要使用任何 id 值。即使我没有看到你使用它，我也保留了你的 elem 传递。
Note that I am careful to ensure I don't hold onto any elements after removing them to avoid memory leaks.
请注意，我很小心地确保在删除元素后不会保留任何元素以避免内存泄漏。
