删除带有特殊字符的 HTML 元素

Question

I want to remove HTML DOM object by its ID, that contains special characters(dots, commas etc). I tried to use this code that escapes those characters but it's not working (element its not being removed):

var file_html_id ="#"+ filename.replace(/[!"#$%&'()*+,.\/:;<=>?@\[\\\]^`{|}~]/g, "\\\\$&");
console.log(file_html_id);
$(file_html_id).remove();

where filename its the ID. It's worth to mention that string with escaped characters is displayed as expected. And if I "hardcode" that string it works fine... So where the problem might be?

Answer 1

Instead of trying to escape the characters yourself you could try a couple of other ways:

1. Use jQuery's escapeSelector() on the id string. This will escape any special characters in the string. Note escapeSelector was added in v3.0 of jQuery. View how they are doing the escaping here if interested.

    $( '#'+ $.escapeSelector('theText') )

2. Use an attribute selector instead of trying to escape all the possible characters for an id selector

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

   This however will select multiple elements if for some bizarre reason you have multiple elements with the same id.

Demo

 var id = "some,weird®,id"; var id2 = "some,other®,id"; $('#'+ $.escapeSelector(id2) ).css({border:'1px solid green'}); $('[id="'+id+'"]').css({border:'1px solid red'});

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <div id="some,weird®,id"></div> <br/> <div id="some,other®,id"></div>