1
votes

Existe-t-il un meilleur moyen d'obtenir l'élément spécifique par son nom de classe pour modifier les éléments?

J'essaie de sélectionner un élément spécifique afin de pouvoir supprimer ou modifier le contenu de l'élément.

Par exemple, s'il s'agit du code que j'ai

<div class="container">
  <div class="box">
    <div class = "c"> OPTION 56 </div>
</div>

Si l'ordre de la boîte est rendu aléatoirement lors du chargement d'une page, et que je veux sélectionner un div qui a OPTION 56 et supprimer tout le nœud qui contient ce contenu, quelle est la meilleure façon d'aborder cela QUAND ils rendent dans les pages Web au hasard?

Je sais que vous pouvez supprimer les childNodes avec getElementsByClassName et leurs index. Existe-t-il un moyen spécifique d'accéder au nœud / élément sans utiliser la méthode getElementsByClassName?

J'ai essayé d'ajouter un identifiant pour toutes les classes div.

Je veux sélectionner un div parent qui contient le contenu OPTION 56 et supprimez le tout

<div class="container">
  <div class="box">
    <div class = "a"> OPTION 12 </div>
<div class="container">
  <div class="box">
    <div class = "b"> OPTION 78 </div>
</div>
<div class="container">
  <div class="box">
    <div class = "c"> OPTION 56 </div>
</div>
<div class="container">
  <div class="box">
    <div class = "d"> OPTION 90 </div>
</div>

Noeud parent.

Merci d'avance.

javascript jquery html

2 commentaires

Il existe de nombreuses balises div qui ne sont pas fermées dans l'exemple de visite

Utilisez id puis getElementById ('YOURID')

4 Réponses :

2
votes

Vous pouvez toujours mettre la valeur du div dans un attribut de données.

$('[data-option="OPTION 56"]').parent('.box').remove();

Et votre javascript (ou jquery, comme ci-dessous) impliquerait

<div class="container">
    <div class="box">
        <div class="a" data-option="OPTION 12">OPTION 12</div>
    </div>
    <div class="box">
        <div class="c" data-option="OPTION 56">OPTION 56</div>
    </div>
</div>

2 commentaires

cette solution implique l'utilisation de jQuery. Juste pour qu'OP le sache.

@Iwolf j'ai vu le tag jquery :)

0
votes

En supposant que vous ne connaissez pas le nom de la classe au préalable et que vous ne connaissez que la valeur innerText que vous souhaitez supprimer, vous pouvez le faire pour supprimer l'élément:

<div class="container">
  <div class="box">
    <div class="a"> OPTION 12 </div>
    <div class="container">
      <div class="box">
        <div class="b"> OPTION 78 </div>
      </div>
      <div class="container">
        <div class="box">
          <div class="c"> OPTION 56 </div>
        </div>
        <div class="container">
          <div class="box">
            <div class="d"> OPTION 90 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

const removeMe = "OPTION 56";
const e = document.querySelectorAll('.container .box div');

e.forEach(e => (e.innerText === removeMe && e.remove()));

0 commentaires

0
votes

Utilisez le : contient le sélecteur de jQuery pour affiner l'élément avec le texte souhaité:
$ ("div: contains ('OPTION 56')")
(vous pouvez le rendre plus spécifique en ajoutant ses parents dans le sélecteur).
Utilisez le parent de jQuery pour accéder à ses parents.
Utilisez remove de jQuery pour supprimer le nœud "grand-père".

Voici un exemple de code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="box">
    <div class = "a"> OPTION 12 </div>
  </div>
</div>
<div class="container">
  <div class="box">
    <div class = "b"> OPTION 78 </div>
  </div>
</div>
<div class="container">
  <div class="box">
    <div class = "c"> OPTION 56 </div>
  </div>
</div>
<div class="container">
  <div class="box">
    <div class = "d"> OPTION 90 </div>
  </div>
</div>

$("div.container > div.box > div:contains('OPTION 56')").parent().parent().remove();

0 commentaires

0
votes

Je pense que cette solution en javascript peut résoudre votre problème. Vous avez ce genre de structure

var options = document.getElementById('options-container');
              var childElements = options.childNodes;
               childElements.forEach(function(child) {
                  if((child.innerText) === "OPTION 56") {
                     child.remove();
                  }
              });

J'ai donné l'id options-container à la div parent. Puis appliqué cette solution

           <div id="options-container">
                <div class="container">
                  <div class="box">
                    <div class = "a"> OPTION 12 </div>
                   </div>
                </div>
                <div class="container">
                  <div class="box">
                    <div class = "b"> OPTION 78 </div>
                  </div>
                </div>
                <div class="container">
                  <div class="box">
                    <div class = "c"> OPTION 56 </div>
                  </div>
                </div>
                <div class="container">
                  <div class="box">
                    <div class = "d"> OPTION 90 </div>
                  </div>
                </div>
            </div>

Il supprime dynamiquement tous les enfants qui auront la valeur OPTION 56 . J'espère que cela vous aidera;)

0 commentaires