jquery - Change or Delete text inside data-reactid child

Question

English isn't my first language but I try my best, I hope you understand my question.

I'm trying to Change or delete some Text inside a div data-reactid with jQuery. I googled for quite some hours and tried much stuff but since I'm really inexperienced I just can't get it to work. The best case scenarion I think would be If I would be able to just find the specific text on the page instead of searching for the div where it's in but I'm already quite lost. This Would be the page in question https://albiononline.com/en/characterbuilder/solo-builds/view/67145

Here is some code of me trying to delete numbers in divs, the 1 and 2 is from another answer i found of something similar and the 3 is where i try to delete it but with the same structure of the real page where I try to actually change it. The numbers are just a placeholder, the goal is to change some actual text like "Tier 8" on the actual page.

//somehow this works 
$('.build-item-details-list[data-reactid="1.$mainhand"]').parent().remove();


//and this does not
$('.build-item-details-list[data-reactid="0.2.1.5.0.4.2.1.$mainhand.0.0"]').parent().remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  1
  <div class="build-item-details-list" data-reactid="1.$mainhand"></div>
</div>
<div>
  2
  <div class="build-item-details-list" data-reactid="2.$mainhand"></div>
</div>

<div class="build-item-details-list" data-reactid=".0.2.1.5.0.4.2.1.$mainhand">
  <div data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0">
    <div data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0.0">
      3
      <div data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0.1">
      </div>
    </div>
  </div>
</div>

I think the solution is probably really easy but since I'm not into any programming and can barely make a html site I just can't find the solution.

Why I'm doing this? I'm trying to make a dark mode and change some unnessecary text. I hope someone could help me out a bit with this.

标签： jquery

Answer 1

1- 与您缺少的0.2.1.5.0.4.2.1.$mainhand.0.0不一样.0.2.1.5.0.4.2.1.$mainhand.0.0.

2- 当你有： <div class="build-item-details-list" data-reactid="1.$mainhand"></div>CSS类build-item-details-list在同一个元素上，data-reactid所以你需要在Jquery中编写你的CSS选择器，如下所示：

$('.build-item-details-list[data-reactid="xxx"]')

注意类并data-reactid连接在一起。

您要做的是找到具有某些数据属性的孩子，build-item-details-list它们不在同一级别，因此您需要使用不同的 CSS 选择器：.build-item-details-list * [data-reactid=像这样：

$('.build-item-details-list * [data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0.0"]').parent().remove();

注意空格和*。

请详细了解： CSS 选择器

保持中间还有你的方法是删除父元素和它里面的所有元素。请使用您的 DEV 工具来查看这是否是您想要的：

例子：

//and this does not
$('.build-item-details-list * [data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0.0"]').parent().remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  1
  <div class="build-item-details-list" data-reactid="1.$mainhand"></div>
</div>
<div>
  2
  <div class="build-item-details-list" data-reactid="2.$mainhand"></div>
</div>

<div class="build-item-details-list" data-reactid=".0.2.1.5.0.4.2.1.$mainhand">
  <div data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0">
    <div data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0.0">
      3
      <div data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0.1">
      </div>
    </div>
  </div>
</div>

如果您只想删除/更改 div 中的文本，您应该使用.text()或.html()

$('.build-item-details-list * [data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0.0"]').html("test");

例子：

//and this does not
$('.build-item-details-list * [data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0.0"]').html("test");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  1
  <div class="build-item-details-list" data-reactid="1.$mainhand"></div>
</div>
<div>
  2
  <div class="build-item-details-list" data-reactid="2.$mainhand"></div>
</div>

<div class="build-item-details-list" data-reactid=".0.2.1.5.0.4.2.1.$mainhand">
  <div data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0">
    <div data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0.0">
      3
      <div data-reactid=".0.2.1.5.0.4.2.1.$mainhand.0.1">
      </div>
    </div>
  </div>
</div>