He estado aprendiendo la funcionalidad básica de JavaScript utilizando jQuery, pero ahora estoy interesado en aprender cómo realizar las mismas acciones con JavaScript simple. He buscado respuestas claras sobre esto, pero no he podido encontrar una respuesta o dirección adecuada para mi situación. Mi pregunta es ¿cómo se selecciona un elemento primario en función del texto de su elemento secundario SIN jQuery? Me gustaría eliminar el elemento padre de la etiqueta que tiene el texto "lefse".

Si supiera dónde usar jQuery, simplemente haría algo como:

$('.BreadBasket .BreadSpec > label:contains("lefse")').parents('.BreadSpec ').remove();

Pero de nuevo me gustaría usar JS simple. ¡Gracias!

<div class="BreadBasket">
<ul>
    <li class="BreadSpec">
      <label>brioche</label>
      <span>01</span>
    </li>
    <li class="BreadSpec">
      <label>focaccia</label>
      <span>02</span>
    </li>
    <li class="BreadSpec">
      <label>naan</label>
      <span>03</span>
    </li>
    <li class="BreadSpec">
      <label>lefse</label>
      <span>04</span>
    </li>
    <li class="BreadSpec">
      <label>tandoor</label>
      <span>05</span>
    </li>
    <li class="BreadSpec">
      <label>tortilla</label>
      <span>06</span>
    </li>
</ul>
3
wallrouse 17 feb. 2017 a las 19:36

4 respuestas

La mejor respuesta

Puede usar .querySelectorAll(), for..of bucle, verificar .textContent del elemento actual label, llamar a ChildNode.remove() en .parentElement si se encuentra una coincidencia, {{ X6}} bucle

for (let label of document.querySelectorAll(".BreadBasket .BreadSpec > label")) {
  if (label.textContent === "lefse") {
    label.parentElement.remove();
    break;
  }
}
<div class="BreadBasket">
  <ul>
    <li class="BreadSpec">
      <label>brioche</label>
      <span>01</span>
    </li>
    <li class="BreadSpec">
      <label>focaccia</label>
      <span>02</span>
    </li>
    <li class="BreadSpec">
      <label>naan</label>
      <span>03</span>
    </li>
    <li class="BreadSpec">
      <label>lefse</label>
      <span>04</span>
    </li>
    <li class="BreadSpec">
      <label>tandoor</label>
      <span>05</span>
    </li>
    <li class="BreadSpec">
      <label>tortilla</label>
      <span>06</span>
    </li>
  </ul>

Si es compatible con el navegador, puede utilizar alternativamente Array.from(), Array.prototype.find()

Array.from(document.querySelectorAll(".BreadBasket .BreadSpec > label"))
.find(({textContent}) => textContent === "lefse")
.parentElement.remove()
<div class="BreadBasket">
  <ul>
    <li class="BreadSpec">
      <label>brioche</label>
      <span>01</span>
    </li>
    <li class="BreadSpec">
      <label>focaccia</label>
      <span>02</span>
    </li>
    <li class="BreadSpec">
      <label>naan</label>
      <span>03</span>
    </li>
    <li class="BreadSpec">
      <label>lefse</label>
      <span>04</span>
    </li>
    <li class="BreadSpec">
      <label>tandoor</label>
      <span>05</span>
    </li>
    <li class="BreadSpec">
      <label>tortilla</label>
      <span>06</span>
    </li>
  </ul>
  <script>
  </script>
4
guest271314 17 feb. 2017 a las 23:57
var textProp = 'textContent' in document ? 'textContent' : 'innerText';

// directly converting the found 'a' elements into an Array,
// then iterating over that array with Array.prototype.forEach():
[].slice.call(document.querySelectorAll('label'), 0).forEach(function(aEl) {
  // if the text of the aEl Node contains the text 'lefse':
  if (aEl[textProp].indexOf('lefse') > -1) {
    // we update its style:
    aEl.parentNode.remove()

  }
});
1
18zehn 17 feb. 2017 a las 16:47

Simplemente use la parentNode propiedad DOM :

// Find all the labels that match your criteria
var labels = document.querySelectorAll('.BreadBasket .BreadSpec > label');

// Loop over the found elements
for(var i = 0; i < labels.length; ++i){
  // Test for the condition. indexOf returns -1 if the specified
  // string is not found, otherwise it returns the index position 
  // of where the string was found.
  if(labels[i].textContent.indexOf("lefse") > -1){
     // When a match is found, get a reference to the parent node
     var parent = labels[i].parentNode;
     
     // There is no "removeParent" method, only "removeChild", so you have
     // to actually find the parent of the parent to be able to remove the
     // desired node. So, get the parent of that parent and use the 
     // removeChild() method
     parent.parentNode.removeChild(parent);
  }
}
<div class="BreadBasket">
<ul>
    <li class="BreadSpec">
      <label>brioche</label>
      <span>01</span>
    </li>
    <li class="BreadSpec">
      <label>focaccia</label>
      <span>02</span>
    </li>
    <li class="BreadSpec">
      <label>naan</label>
      <span>03</span>
    </li>
    <li class="BreadSpec">
      <label>lefse</label>
      <span>04</span>
    </li>
    <li class="BreadSpec">
      <label>tandoor</label>
      <span>05</span>
    </li>
    <li class="BreadSpec">
      <label>tortilla</label>
      <span>06</span>
    </li>
</ul>
1
Scott Marcus 17 feb. 2017 a las 16:42
var liElements=document.getElementsByTagName('LABEL');
for(var i=0; i<liElements.length; i++){
  var elem=liElements[i];
  if(elem.innerHTML==='lefse'){
    var li=elem.parentNode;
    li.parentNode.removeChild(li);
  }
}
<div class="BreadBasket">
<ul>
    <li class="BreadSpec">
      <label>brioche</label>
      <span>01</span>
    </li>
    <li class="BreadSpec">
      <label>focaccia</label>
      <span>02</span>
    </li>
    <li class="BreadSpec">
      <label>naan</label>
      <span>03</span>
    </li>
    <li class="BreadSpec">
      <label>lefse</label>
      <span>04</span>
    </li>
    <li class="BreadSpec">
      <label>tandoor</label>
      <span>05</span>
    </li>
    <li class="BreadSpec">
      <label>tortilla</label>
      <span>06</span>
    </li>
</ul>
</div>
0
Mr.Bruno 17 feb. 2017 a las 16:47