Category: JavaScript Answers

Sometimes, we want to remove an element instead of appending to it with jQuery.

In this article, we’ll look at how to remove an element instead of appending to it with jQuery.

Opposite of Append in jQuery

To remove an element instead of appending to it with jQuery, we can use the remove method.

For instance, if we have the following HTML:

<div>

</div>

Then we can write:

const newUL = $('<ul><li>test</li></ul>');
$('div').append(newUL);

setTimeout(() => {
  newUL.remove();
}, 3000)

to create the ul element with:

const newUL = $('<ul><li>test</li></ul>');

Then we can append it to the div with:

$('div').append(newUL);

And finally, we remove the ul after 3000 milliseconds by writing:

setTimeout(() => {
  newUL.remove();
}, 3000)

Conclusion

To remove an element instead of appending to it with jQuery, we can use the remove method.

To trigger a checkbox click event even if it’s checked with jQuery, we can call the jQuery trigger method with 'click' .

For instance, if we have the following HTML:

<div>  
  <input type="checkbox" id="item-1" value="1"> Item 1 <br />  
  <input type="checkbox" id="item-2" value="2" disabled> Item 2 <br />  
  <input type="checkbox" id="item-3" value="3" disabled> Item 3 <br />  
  <input type="checkbox" id="item-4" value="4" disabled> Item 4 <br />  
  <input type="checkbox" id="item-5" value="5"> Item 5  
</div>

Then we can cal trigger with 'click' by writing:

$('input').trigger('click');

to click all the non-disabled checkboxes.

To paginate a JavaScript array, we can use the slice method to return the chunk of the array we want.

For instance, we can write:

const arr = Array(100).fill().map((_, i) => i)
const paginate = (array, pageSize, pageNumber) => {
  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}
console.log(paginate(arr, 10, 1))
console.log(paginate(arr, 10, 2))
console.log(paginate(arr, 10, 3))

We have the arr array with 100 entries.

Then we create paginate function that takes the array , pageSize and pageNumber parameters.

pageNumber starts from 1, so we call slice with (pageNumber — 1) * pageSize as the first argument and pageNumber * pageSize as the 2nd argument to return the slice according to a human-readable page number.

Then from the console log, we see:

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
[20, 21, 22, 23, 24, 25, 26, 27, 28, 29]

as the returned values of paginate with pageSize 10 and pageNumber 1, 2, and 3 respectively.

To find an object property by key deep in a nested JavaScript array, we can traverse the deeply nested array with various loops and methods.

For instance, we can write:

const arr = [{
  'title': "some title",
  'channel_id': '123we',
  'options': [{
    'channel_id': 'abc',
    'image': 'http://asdasd.com/all-inclusive-block-img.jpg',
    'title': 'All-Inclusive',
    'options': [{
      'channel_id': 'dsa2',
      'title': 'Some Recommends',
      'options': [{
        'image': 'http://www.asdasd.com',
        'title': 'Sandals',
        'id': 1,
        'content': {
          //...
        }
      }]
    }]
  }]
}]

const customFilter = (object, key, value) => {
  if (Array.isArray(object)) {
    for (const obj of object) {
      const result = customFilter(obj, key, value);
      if (result) {
        return obj;
      }
    }
  } else {
    if (object.hasOwnProperty(key) && object[key] === value) {
      return object;
    }

    for (const k of Object.keys(object)) {
      if (typeof object[k] === "object") {
        const o = customFilter(object[k], key, value);
        if (o !== null && typeof o !== 'undefined')
          return o;
      }
    }

    return null;
  }
}

console.log(customFilter(arr, 'id', 1))

We have the deeply nested arr array that we want to check if an object with id property set to 1 exists.

To do that, we create the customFilter function that takes the object that we want to search, and the key and value that we want to look for in the object .

In the function, we check if object is an array with Array.isArray .

If it is, then we loop through the entries with the for-of loop and call customFilter with obj array entry, key and value .

Otherwise, if we found the key and value we’re looking for with:

object.hasOwnProperty(key) && object[key] === value

then we return the object.

Otherwise, we loop through the keys of the object with the for-of loop.

In the loop body, we check if the property value is an object with:

typeof object[k] === "object"

And if it is, we call customFilter on it with object[k] , key and value .

If the returned result of that isn’t null or undefined , we return the o object.

If we traverse the whole array and found no match, then we return null .

Therefore, the console log should log the entry found since it exists.

To extend a JavaScript class, we can use the extends keyword and the class syntax.

For instance, we can write:

class Person {
  sayHello() {
    console.log('hello');
  }

  walk() {
    console.log('I am walking!');
  }
}

class Student extends Person {
  sayGoodBye() {
    console.log('goodbye');
  }

  sayHello() {
    console.log('Hi, I am a student');
  }
}

const student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();

console.log(student1 instanceof Person);
console.log(student1 instanceof Student);

We have the Person class that serves as the base class for the Student class.

It has the sayHello and walk methods.

Then we have the Student class which inherits the contents of the Person class.

It also has its own methods, which are sayGoodBye and sayHello .

The extends keywords indicates that Student has Person as its base class, so it should also inherit methods from the Person class.

Next, we create a new Student instance with the new keyword.

And we call all the methods from the Student class itself and the Person class from student1 .

Also, both console logs should log true because student1 is a Student instance and Student ‘s base class is Person .