jquery-selectors - .remove(":contains()") 不工作

Question

我有一个input fieldwhere 值等于id's 和 a button。当它button被触发时，我想删除输入字段中的id按钮，以及value is equal存储在输入字段或 id 中的数据的按钮。这里http://jsfiddle.net/leonardeveloper/hcfzL/3/

HTML：

<form id="materialForm" action="#" method="post">
    <input id="materials" type="text" name="materials" value="1,2,3" readonly="readonly" disabled="disabled" />
</form>
<div id="display">
    <button class="removes" value="1">x</button>
    <button class="removes" value="2">x</button>
    <button class="removes" value="3">x</button>
</div>

JS：

$(document).on('click', '.removes', function () {
    var id = $(this).val();
    alert(id);
    $('#materials').remove(":contains('" + id + "')");
    $('#display').remove(":contains('" + id + "')");
    return false;
});

Answer 1

.remove()用于删除 DOM 元素，而不是值中的文本。它会删除它所应用的元素，而不是其中包含的元素。

$(document).on('click', '.removes', function () {
    var id = $(this).val();
    alert(id);
    var materials = $('#materials').val().split(',');
    materials = materials.filter(function(e) {
        return e != id;
    });
    $('#materials').val(materials.join(','));
    $(this).remove();
    return false;
});

小提琴

Answer 2

选择:contains器用于选择包含其他 DOM 节点的 DOM 节点。在您的情况下，您希望选择其值中具有特定字符串的输入元素。

您可能应该使用.filter过滤器来选择与过滤器匹配的输入元素。

Answer 3

尝试

$(document).on('click','.removes',function(){
    var id = $(this).val();
    $('#materials').val(function(){
        var value = this.value, array = value.split(',');
        var idx = $.inArray(id, array);
        if(idx >=0 ){
            array.splice(idx, 1)
            value = array.join(',')
        }
        return value;
    })
    $(this).remove();
    return false;
});

演示：小提琴