Групповые селекторы javascript с конкатенацией

Question

Можете ли вы объединить их в одну строку, я знаю, как это сделать без конкатенации, но с, а не с работой.

$('#vda'+event.target.id).remove(); 
$('#a'+event.target.id).remove(); 
$('#'+event.target.id).remove(); 
$('#da'+event.target.id).remove(); 

Answer 1

вот ваш один лайнер.

$(
    '#vda' + event.target.id + 
    ', #a' + event.target.id + 
    ', #' + event.target.id + 
    ', #da' + event.target.id 
).remove(); 

кажется больше, но я разделился на лучшую читаемость.

https://api.jquery.com/multiple-selector/ здесь документация для многократного селектора JQuery

Answer 2

Попробуйте

var str = ['#vda', '#a', '#', '#da'].join(event.target.id + ',') + event.target.id; 
$(str).remove(); 

Метод Join() объединяет все элементы массива в строку.

str = arr.присоединиться ([Сепаратор = «»])

или вы можете использовать reduce функцию

var str = ['#vda', '#a', '#', '#da'].reduce(function(p,c, i,arr){ 
    if(i !== arr.length - 1) 
     return p + event.target.id + ',' + c 
    else 
     return p + event.target.id+ ',' + c + event.target.id 
}); 

$(str).remove(); 

Answer 3

Если у вас нет каких-либо дополнительных элементов с одинаковыми идентификаторами, вы можете попробовать концы с селектором шаблона:

$("[id$='pattern']")

$("#btn").on("click", function() { 
 
    var target = "test"; // e.target.id 
 
    $('[id$="test"]').remove(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div> 
 
    <div id="test">test</div> 
 
    <div id="atest">atest</div> 
 
    <div id="datest">datest</div> 
 
    <div id="vdatest">vdatest</div> 
 
</div> 
 
<button id="btn">Test</button>

Вы можете попытаться сделать массив из всех возможных комбинаций и использовать map + join для получения строки

$("#btn").on("click", function() { 
 
    var target = "test"; // e.target.id 
 
    var selector_list = ["#", "#a", "#da", "#vda"]; 
 
    var el_str = selector_list.map(function(item) { 
 
    return item + target; 
 
    }).join(); 
 
    console.log(el_str); 
 
    $(el_str).remove(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div> 
 
    <div id="test">test</div> 
 
    <div id="atest">atest</div> 
 
    <div id="datest">datest</div> 
 
    <div id="vdatest">vdatest</div> 
 
</div> 
 
<button id="btn">Test</button>

Answer 4

JQuery позволяет выбрать, как вы в CSS

Итак, для примера, если вы хотите сделать селектор, который соответствует всем div s с test класс, и все p элементы, а также, в CSS необходимо выбрать их с помощью:

div.test, p { property:value } 

В JQuery, сделать то же самое:

$("div.test, p").remove() 

Таким образом, вы можете просто заменить div.test, p с тем, что вы селектору вам как

Here's a nice reference for CSS selectors

Answer 5

['vda','a','',da].forEach(function(val,key){ 

    $('#'+event.target.id).remove();  

}) 

Answer 6

Только для записи вы можете использовать чистый API-интерфейс JS в стиле ES6 следующим образом;

[...document.querySelectorAll(['#vda','#a','#','#da'].join(",")].forEach(e => e.parentElement.removeChild(e));