.remove(“：.remove()”)无法工作

Question

我有一个input field，其值等于id和button。当触发button时，我希望删除输入字段中的id，以及输入字段或id中存储的数据的value is equal按钮。

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>

联署材料：

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

Answer 1

试一试

$(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;
});

演示：小提琴

Answer 2

.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 3

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

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