0

I want DELETE only from table class="variations" with javascript the label which has attribute for = 'pa_cb5feb1b7314637725a2e7'

<table class="variations">
    <tbody> 
        <tr>
            <td class="label"><label for="pa_1ef722433d607dd9d2b8b7">Ships From</label></td>
        </tr>
        <tr>
            <td class="label"><label for="pa_cb5feb1b7314637725a2e7">Color</label></td>
        </tr>
    </tbody>
</table>

I WANT TO KEEP only "Ships From"; Any help is appreciated

cham
  • 31
  • 1
  • 10

3 Answers3

3

Use querySelector() to select the element. If you have multiple elements, use querySelectorAll() and iterate over the resulting list. Then, you can remove it from the DOM with remove(). Here is an example:

var el = document.querySelector('label[for=pa_cb....]');
if (el) {
  el.remove();
}

If you want to keep the inner HTML and append it to the parent, you could store the it in a variable, remove the label and then add the inner HTML to the parent. Here is an example:

var el = document.querySelector('label[for=pa_cb....]');
if (el) {
  var innerHtml = el.innerHTML;
  var parentElement = el.parentElement;
  el.remove();
  parentElement.innerHTML += innerHtml;
}
ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
2

Just Make a Script tag in the last and get all element with label tag and delete the element which has the same for attribute as you want. Here is the Code that might help - 

<html>
<body>
<table class="variations">
    <tbody> 
        <tr>
            <td class="label"><label for="pa_1ef722433d607dd9d2b8b7">Ships From</label></td>
        </tr>

        <tr>
            <td class="label"><label for="pa_cb5feb1b7314637725a2e7">Color</label></td>
       </tr>
   </tbody>
</table>
<script>
   var labeltags = document.getElementsByTagName("label");
   for (var i=0;i<labeltags.length;i++){
       if (labeltags[i].getAttribute("for")=="pa_cb5feb1b7314637725a2e7"){
           labeltags[i].remove();
       }
   }
</script>    
</body>
</html>
Gauri Shankar Gupta
  • 139
  • 5
  • thanks, but how to delete it only from a table that class :
    – cham Jun 15 '20 at 11:18
  • 1
    Just get the Variations Class first and then query for all label tags in that particular class only. You just need to change two lines in the script tag - var variationsClass = document.getElementsByClassName("variations")[0]; var labeltags = variationsClass.getElementsByTagName("label"); and then you can continue the same. – Gauri Shankar Gupta Jun 15 '20 at 11:26
1

As much I understand you need to remove the label by the for value.

Then this might help you.

Using Javascript 

var labels = document.querySelectorAll(".variations label[for]");
console.log(labels);

for(let i = 0; i < labels.length; i++ ) {
  if(labels[i].getAttribute('for') === 'pa_1ef722433d607dd9d2b8b7') {
    labels[i].remove();
  }
}

Working Demo

One line solution in Jquery (life-saver)

$('.variations').find("label[for='pa_1ef722433d607dd9d2b8b7']").remove();
sibabrat swain
  • 1,277
  • 8
  • 20
  • thanks for your help but how to have it deleted only from a table that class :
    – cham Jun 15 '20 at 10:58
  • 1
    I have updated, please check the answer. If it helped then please consider accepting the answer. – sibabrat swain Jun 15 '20 at 11:03
  • 1
    You can go with a single line solution as well if you are using jQuery. Please have a look at the updated answer for jQuery Solution. – sibabrat swain Jun 15 '20 at 11:14
  • this code work with jQuery, so i will integrate it to my wordpress. – cham Jun 15 '20 at 11:27
  • 1
    Yes, use the jQuery Solution it will work. You might need to replace `$` with `jQuery ` in Wordpress. – sibabrat swain Jun 15 '20 at 11:32
  • You don't need `jQuery` in 2020 anymore. Use `querySelector` instead. Especially not for selecting elements. – ssc-hrep3 Jun 15 '20 at 11:38
  • @ssc-hrep3 you are right. It basically depends on which version of jquery you are using. For an older version, you need to use `jQuery`. `https://stackoverflow.com/a/15132734/9739044` – sibabrat swain Jun 15 '20 at 11:40