jQuery元素没有删除

Question

我想删除id=decoratives / Interior但不起作用的元素。

如果由于特殊字符而无法正常工作，那么如何用空格更改/？

＆＃13;

＆＃13;

$(".remove").on("click", function(e) {
  e.preventDefault();
  var category = $(this).data("cat");
  $('#' + category.replace(/\s/g, '')).remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="decoratives/Interior">
  <a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg">
    <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg" alt="Image1" style="height:75px">
    <div class="image-hover">
      <i class="icon-zoom-in-2"></i>
    </div>
  </a>
  <br>
  <a class="remove" data-cat="decoratives / Interior">Remove Image</a> 

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用attribute equals selector，因为它包含元字符/。

$('[id="' + category.replace(/\s/g,'') + '"]').remove();

$(".remove").on("click", function(e) {
  e.preventDefault();
  var category = $(this).data("cat");
  $('[id="' + category.replace(/\s/g, '') + '"]').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="decoratives/Interior">
  <a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg">
    <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg" alt="Image1" style="height:75px">
    <div class="image-hover">
      <i class="icon-zoom-in-2"></i>
    </div>
  </a>
  <br>
  <a class="remove" data-cat="decoratives / Interior">Remove Image</a> 

</div>

<小时/> 或者您需要通过/转义元字符\\/。

$('#' + category.replace(/\s/g,'').replace('/','\\/')).remove();

$(".remove").on("click", function(e) {
  e.preventDefault();
  var category = $(this).data("cat");
  $('#' + category.replace(/\s/g, '').replace('/', '\\/')).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="decoratives/Interior">
  <a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg">
    <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg" alt="Image1" style="height:75px">
    <div class="image-hover">
      <i class="icon-zoom-in-2"></i>
    </div>
  </a>
  <br>
  <a class="remove" data-cat="decoratives / Interior">Remove Image</a> 

</div>

来自jQuery Selectors docs：

  

要使用任何元字符（例如!"#$%&'()*+,./:;<=>?@[\]^`` {|}~）作为名称的文字部分，必须使用两个反斜杠对其进行转义：\\.例如，带{id="foo.bar"的元素1}}，可以使用选择器$("#foo\\.bar")。

Answer 2

如果/中有id这样的字符，则无法使用CSS ID选择器获取元素而不会转义/，这很痛苦

您不涉及转义/的选项是使用属性选择器：

$('[id="' + category.replace(/\s/g, '') + '"]').remove();

示例：

＆＃13;

＆＃13;

setTimeout(function() {
  var category = "decoratives/Interior";
  $('[id="' + category.replace(/\s/g, '') + '"]').remove();
}, 800);

＆＃13;

<div id="decoratives/Interior">
  <a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg">
    <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg" alt="Image1" style="height:75px">
    <div class="image-hover">
      <i class="icon-zoom-in-2"></i>
    </div>
  </a>
  <br>
  <a class="remove" data-cat="decoratives / Interior">Remove Image</a> 

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

或getElementById：

$(document.getElementById(category.replace(/\s/g, '')).remove();

示例：

＆＃13;

＆＃13;

setTimeout(function() {
  var category = "decoratives/Interior";
  $(document.getElementById(category.replace(/\s/g, ''))).remove();
}, 800);

＆＃13;

<div id="decoratives/Interior">
  <a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg">
    <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg" alt="Image1" style="height:75px">
    <div class="image-hover">
      <i class="icon-zoom-in-2"></i>
    </div>
  </a>
  <br>
  <a class="remove" data-cat="decoratives / Interior">Remove Image</a> 

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;